@octane-xplat/ui 0.5.0 → 0.6.0

package/src/theme/tokens.css

@@ -70,15 +70,26 @@ img {
 	display: flex;
 	flex-direction: column;
 }
-/* Native has no scroll chaining — a ScrollView/ListView just bounces
-   inside itself because the parent is never a scroller. contain is the
-   DOM equivalent: scroll stays in the leaf it started in. */
-.vx-scroll,
-.vx-list {
+/* Native has no scroll chaining — a ScrollView just bounces inside
+   itself because the parent is never a scroller. contain is the DOM
+   equivalent: scroll stays in the leaf it started in. */
+.vx-scroll {
 	overscroll-behavior: contain;
 }
 /* xplat-web-only:end */
 
+/* Shared normalization — NS FlexboxLayout defaults flex children to
+   shrink:1 with NO min-content floor (its shrink pass clamps at
+   effectiveMinWidth/Height = the explicit min-* prop, default 0), so an
+   overflowing column crushes intrinsic children toward zero where the
+   web stops at min-content. RN's Yoga defaults flexShrink:0 for the same
+   reason — do the same on both engines. `*` is zero-specificity: flex-1
+   (the shorthand sets shrink:1) and .shrink still opt back in, and
+   truncation patterns pair them with min-w-0/min-h-0. */
+* {
+	flex-shrink: 0;
+}
+
 /* vocabulary base styles */
 
 .vx-view,
@@ -109,8 +120,17 @@ img {
 	display: flex;
 	flex-direction: column;
 }
-/* xplat-web-only:start — the native Drawer leaf is the ui-drawer widget;
-   these rules style the web DOM drawer overlay */
+/* Self-drawn drawer — shared geometry. Native grid children overlay the
+   cell (panel pins left via horizontalAlignment in the leaf); DOM
+   positioning extras are web-only below. */
+.vx-drawer-backdrop {
+	background-color: rgba(0, 0, 0, 0.4);
+}
+.vx-drawer-panel {
+	width: 280px;
+	background-color: var(--color-surface);
+}
+/* xplat-web-only:start */
 .vx-drawer {
 	display: flex;
 	flex-direction: row;
@@ -125,7 +145,6 @@ img {
 .vx-drawer-backdrop {
 	position: absolute;
 	inset: 0;
-	background: rgba(0, 0, 0, 0.4);
 }
 .vx-drawer-panel {
 	position: absolute;
@@ -133,9 +152,7 @@ img {
 	top: 0;
 	bottom: 0;
 	left: 0;
-	width: 280px;
 	overflow: auto;
-	background: var(--color-surface);
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
 }
 /* xplat-web-only:end */
@@ -167,189 +184,1327 @@ img {
 .vx-spacer {
 	flex-grow: 1;
 }
-
-.vx-pressable {
-	display: flex;
+
+.vx-pressable {
+	display: flex;
+	flex-direction: column;
+	user-select: none;
+}
+
+/* web press feedback */
+.vx-pressable:active {
+	opacity: 0.85;
+}
+/* native press feedback (NS pseudo — dead rule on web, and vice versa) */
+.vx-pressable:pressed {
+	opacity: 0.85;
+}
+
+/* xplat-web-only:start — overlays/toasts/popovers render through RootLayout
+   or showModal on native; these portal/positioning rules are web-only */
+.vx-overlay {
+	z-index: 1000;
+}
+
+.vx-overlay-shade {
+	position: absolute;
+	inset: 0;
+	background-color: rgba(0, 0, 0, 0.4);
+}
+
+.vx-overlay-content {
+	position: relative;
+	z-index: 1;
+}
+
+.vx-popover {
+	z-index: 1001;
+}
+
+.vx-popover-backdrop {
+	background-color: transparent;
+}
+
+.vx-tooltip {
+	padding: 4px 8px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-sm);
+	corner-shape: squircle;
+	background-color: var(--color-surface);
+	color: var(--color-text);
+	font-size: 12px;
+	line-height: 16px;
+}
+
+.vx-toast-host {
+	position: fixed;
+	z-index: 1002;
+	left: 0;
+	right: 0;
+	display: flex;
+	justify-content: center;
+	pointer-events: none;
+}
+
+.vx-toast-top {
+	top: 24px;
+}
+.vx-toast-bottom {
+	bottom: 24px;
+}
+
+.vx-toast {
+	pointer-events: auto;
+}
+/* xplat-web-only:end */
+
+/* Normalized OS-widget reset — TextInput/TextArea are real
+   <input>/<textarea>/TextField/TextView; the leaves emit vx-input/
+   vx-textarea unconditionally so the platform chrome is stripped before
+   app styles apply. On Android the transparent background replaces the
+   default EditText drawable (kills the Material underline); zero padding
+   removes native insets. Legitimate semantics — IME, secure entry,
+   selection, autofill, caret, focus — stay platform-native by design. */
+.vx-input,
+.vx-textarea {
+	padding: 0;
+	margin: 0;
+	border-width: 0;
+	background-color: transparent;
+	color: var(--color-text);
+	font-size: 14px;
+	/* NS placeholder color; web uses the ::placeholder pseudo below. */
+	placeholder-color: var(--color-text-secondary);
+}
+/* xplat-web-only:start — DOM-only reset: element UA chrome and the
+   focus outline (normalized to the same thin ring on both). */
+.vx-input,
+.vx-textarea {
+	appearance: none;
+	-webkit-appearance: none;
+	outline: none;
+}
+.vx-input:focus,
+.vx-textarea:focus {
+	outline: 1px solid var(--color-primary);
+	outline-offset: -1px;
+}
+/* xplat-web-only:end */
+
+/* auto-grow owns height — the manual resize handle has no native analog */
+/* xplat-web-only:start */
+.vx-textarea {
+	resize: none;
+}
+/* xplat-web-only:end */
+
+/* WebView chrome reset — the web leaf is a real <iframe>: strip the UA's
+   inset border and the inline-element baseline gap. WKWebView and
+   android.webkit.WebView ship chrome-free, so there is no native reset. */
+/* xplat-web-only:start */
+.vx-webview {
+	display: block;
+	border-width: 0;
+}
+/* xplat-web-only:end */
+
+/* Video — surface-hosted leaf: the engine surface fills the frame and the
+   self-drawn transport layers stack on top in the same grid cell
+   (vx-stack). NS-side rules only — DOM resets sit in the web block. */
+.vx-video {
+	background-color: #000;
+}
+
+.vx-video-centerbtn {
+	width: 56px;
+	height: 56px;
+	border-radius: 28px;
+	background-color: rgba(0, 0, 0, 0.55);
+	align-items: center;
+	justify-content: center;
+}
+
+.vx-video-bar {
+	background-color: rgba(0, 0, 0, 0.45);
+	padding: 4px 8px;
+}
+
+.vx-video-btn {
+	padding: 4px;
+}
+
+/* Full-frame tap layer — hit target only, never paints. */
+.vx-video-tap {
+	background-color: transparent;
+}
+
+.vx-video-time {
+	color: #fff;
+	font-size: 11px;
+	min-width: 34px;
+	text-align: center;
+}
+
+/* xplat-web-only:start — the <video> element is inline and overlays would
+   otherwise swallow pointer events; native layers are hit-transparent by
+   default, so none of this exists on NS. */
+.vx-video-surface {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.vx-video-poster,
+.vx-video-barwrap {
+	pointer-events: none;
+}
+
+.vx-video-barwrap > * {
+	pointer-events: auto;
+}
+
+.vx-video-poster {
+	object-fit: cover;
+}
+
+/* xplat-web-only:end */
+
+/* CameraView — surface-hosted: the preview fills the frame; web shows it
+   through an object-fit:cover <video>. */
+.vx-cameraview {
+	background-color: #000;
+}
+
+/* xplat-web-only:start */
+.vx-cameraview-surface {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+/* xplat-web-only:end */
+
+/* xplat-web-only:start */
+/* Modal ROUTES (pushRoute presentation:'modal') — the URL stays underneath,
+   so the overlay is a fixed layer over the shell rather than a dialog. */
+.vx-modalroute {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	display: flex;
+	align-items: stretch;
+	justify-content: stretch;
+}
+
+.vx-modalroute-shade {
+	position: absolute;
+	inset: 0;
+	border: 0;
+	padding: 0;
+	background: rgba(0, 0, 0, 0.4);
+	cursor: default;
+}
+
+.vx-modalroute-body {
+	position: relative;
+	flex: 1;
+	min-width: 0;
+	overflow: auto;
+	color: var(--color-text);
+	background-color: var(--color-surface);
+}
+/* xplat-web-only:end */
+
+/* xplat-web-only:start — placeholder pseudos are DOM-only. Muted like
+   real placeholder text, not currentColor (a full-opacity hint reads as
+   a typed value); --placeholder-color is the per-field prop escape. */
+input::placeholder,
+textarea::placeholder {
+	color: var(--placeholder-color, var(--color-text-secondary));
+}
+/* xplat-web-only:end */
+
+/* xplat-web-only:start — form controls don't inherit the body font in the
+   DOM (UA stylesheet wins); without this they render in the UA face. */
+input,
+textarea,
+select,
+button {
+	font-family: inherit;
+}
+/* xplat-web-only:end */
+
+/* Self-drawn spinner — the border ring is shared (native rotates the
+   view via `animate`; DOM spins via the keyframes below). */
+.vx-spinner {
+	width: 24px;
+	height: 24px;
+	border-width: 2px;
+	border-color: var(--color-text-secondary);
+	border-right-color: transparent;
+	border-radius: 50%;
+}
+/* Pull-to-refresh — the overlay strip hosting the spinner. Its height is
+   the default `refreshThreshold` (64px web / 64dip native); the leaf
+   translates it in/out — reveal math lives in refresh.*.ts. */
+.vx-refresh {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 64px;
+}
+/* xplat-web-only:start — the DOM leaf needs explicit clipping plus the
+   absolute overlay; native clips via the wrapper grid
+   (clipsToBounds/ViewGroup) and stacks children in one cell. */
+.vx-refresh-wrap {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+.vx-refresh-wrap > .vx-scroll {
+	flex: 1;
+	min-height: 0;
+}
+.vx-refresh {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+}
+/* xplat-web-only:end */
+/* xplat-web-only:start — DOM needs an inline-block box + CSS animation;
+   the native leaf drives view.animate instead */
+.vx-spinner {
+	display: inline-block;
+	box-sizing: border-box;
+	animation: vx-spinner-turn 0.8s linear infinite;
+}
+
+@keyframes vx-spinner-turn {
+	to {
+		transform: rotate(360deg);
+	}
+}
+/* xplat-web-only:end */
+
+/* Self-drawn switch — flex track + thumb. `--on` flips justify-content,
+   which slides the thumb; identical geometry on web and native. */
+.vx-switch {
+	width: 48px;
+	height: 28px;
+	padding-left: 3px;
+	padding-right: 3px;
+	border-radius: 14px;
+	background-color: var(--color-border);
+	justify-content: flex-start;
+	align-items: center;
+}
+.vx-switch--on {
+	background-color: var(--color-primary);
+	justify-content: flex-end;
+}
+.vx-switch-thumb {
+	width: 22px;
+	height: 22px;
+	border-radius: 50%;
+	background-color: var(--color-surface);
+}
+/* xplat-web-only:start — the DOM host is a div; flex + cursor live here */
+.vx-switch {
+	display: flex;
+	cursor: pointer;
+}
+/* xplat-web-only:end */
+
+/* Self-drawn slider — host is a grid (native) / relative div (web);
+   track + fill + thumb overlay the same box. */
+.vx-slider {
+	height: 28px;
+}
+.vx-slider-track {
+	height: 4px;
+	border-radius: 2px;
+	background-color: var(--color-border);
+	vertical-align: middle;
+}
+.vx-slider-fill {
+	height: 4px;
+	border-radius: 2px;
+	background-color: var(--color-primary);
+	vertical-align: middle;
+}
+.vx-slider-thumb {
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background-color: var(--color-primary);
+	vertical-align: middle;
+}
+/* xplat-web-only:start — absolute positioning is DOM-only; native grid
+   children center via vertical-align and pin via margin-left. */
+.vx-slider {
+	position: relative;
+}
+.vx-slider-track,
+.vx-slider-fill {
+	position: absolute;
+	top: 50%;
+	left: 0;
+	right: 0;
+	transform: translateY(-50%);
+}
+.vx-slider-thumb {
+	position: absolute;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+/* xplat-web-only:end */
+
+/* xplat-web-only:start — Pager's web leaf is a mandatory scroll-snap row:
+   one page per item at 100% host width so scrollLeft / clientWidth is a
+   clean page index. Native pages are sized by the widget itself, so the
+   whole block is DOM-only. Scrollbar hidden (native has none); contain
+   keeps the swipe from chaining to a parent scroller, matching .vx-scroll. */
+.vx-pager {
+	display: flex;
+	flex-direction: row;
+	overflow-x: auto;
+	overflow-y: hidden;
+	scroll-snap-type: x mandatory;
+	overscroll-behavior-x: contain;
+	scrollbar-width: none;
+	touch-action: pan-x;
+}
+.vx-pager::-webkit-scrollbar {
+	display: none;
+}
+.vx-pager-page {
+	flex: 0 0 100%;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	scroll-snap-align: start;
+}
+/* xplat-web-only:end */
+
+/* Phase-1 self-drawn components — functional geometry + token chrome only;
+   visual design is the app's job. */
+
+/* Button — row-direction pressable (vx-pressable already supplies display
+   and press feedback). */
+.vx-button {
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+/* Collapsible/Accordion — column stacks. */
+.vx-collapsible,
+.vx-collapsible-content,
+.vx-accordion,
+.vx-accordion-item {
+	flex-direction: column;
+}
+
+/* Checkbox — 20px box + check glyph; --on fills with primary. */
+.vx-checkbox-row {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-checkbox {
+	width: 20px;
+	height: 20px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-sm);
+	align-items: center;
+	justify-content: center;
+}
+.vx-checkbox--on .vx-checkbox {
+	background-color: var(--color-primary);
+	border-color: var(--color-primary);
+}
+.vx-checkbox-check {
+	font-size: 14px;
+	line-height: 20px;
+	color: var(--color-onprimary);
+}
+.vx-checkbox-label {
+	margin-left: 8px;
+}
+.vx-checkbox--disabled {
+	opacity: 0.5;
+}
+
+/* Radio group — column/row of dot options. */
+.vx-radio-group {
+	flex-direction: column;
+}
+.vx-radio-group--row {
+	flex-direction: row;
+}
+.vx-radio-row {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-radio {
+	width: 18px;
+	height: 18px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: 50%;
+	align-items: center;
+	justify-content: center;
+}
+.vx-radio--on .vx-radio {
+	border-color: var(--color-primary);
+}
+.vx-radio-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: var(--color-primary);
+}
+.vx-radio-label {
+	margin-left: 8px;
+}
+.vx-radio--disabled {
+	opacity: 0.5;
+}
+
+/* SegmentedControl — equal-width segments in a rounded track; `--on`
+   raises the selected one. flex-basis is dead on NS (the shorthand parser
+   drops it and the standalone property isn't registered), so width:0 +
+   flex-grow:1 is what distributes segments equally on both engines. */
+.vx-segmented {
+	flex-direction: row;
+	padding: 3px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
+	corner-shape: squircle;
+	background-color: var(--color-surface-secondary);
+	color: var(--color-text);
+}
+.vx-segment {
+	flex-grow: 1;
+	width: 0;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	padding-top: 6px;
+	padding-bottom: 6px;
+	padding-left: 10px;
+	padding-right: 10px;
+	border-radius: var(--radius-sm);
+}
+.vx-segment--on {
+	background-color: var(--color-surface);
+}
+.vx-segment-label {
+	font-size: 13px;
+	color: var(--color-text-secondary);
+}
+.vx-segment--on .vx-segment-label {
+	color: var(--color-text);
+	font-weight: 600;
+}
+.vx-segmented--disabled,
+.vx-segment--disabled {
+	opacity: 0.5;
+}
+/* xplat-web-only:start — the DOM hosts are divs; flex + cursor live here */
+.vx-segmented {
+	display: flex;
+}
+.vx-segment {
+	display: flex;
+	cursor: pointer;
+	user-select: none;
+}
+.vx-segment:focus {
+	outline: 1px solid var(--color-primary);
+	outline-offset: -1px;
+}
+.vx-segment--disabled {
+	cursor: default;
+}
+/* xplat-web-only:end */
+
+/* SearchInput — chrome-reset field: bordered shell, leading glyph, the
+   field owns the remaining width, self-drawn clear. The web leaf hides the
+   engine's own search-cancel button so native's (hand-drawn) matches. */
+.vx-search {
+	flex-direction: row;
+	align-items: center;
+	padding-top: 6px;
+	padding-bottom: 6px;
+	padding-left: 10px;
+	padding-right: 6px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
+	corner-shape: squircle;
+	background-color: var(--color-surface);
+	color: var(--color-text);
+}
+.vx-search-icon {
+	color: var(--color-text-secondary);
+}
+.vx-search-field {
+	flex-grow: 1;
+	padding-left: 8px;
+	padding-right: 8px;
+	font-size: 14px;
+	color: var(--color-text);
+}
+.vx-search-clear {
+	width: 24px;
+	height: 24px;
+	border-radius: 9999px;
+	align-items: center;
+	justify-content: center;
+	background-color: var(--color-surface-secondary);
+	color: var(--color-text-secondary);
+}
+.vx-search--disabled {
+	opacity: 0.5;
+}
+/* xplat-web-only:start — the DOM host/field/buttons need display + the UA
+   reset; native's flexbox children carry these from the class already. */
+.vx-search {
+	display: flex;
+}
+.vx-search-icon {
+	display: inline-flex;
+	flex: none;
+}
+.vx-search-field {
+	min-width: 0;
+	border: 0;
+	background: none;
+	outline: none;
+	appearance: none;
+	-webkit-appearance: none;
+}
+input.vx-search-field::-webkit-search-cancel-button {
+	display: none;
+}
+.vx-search-clear {
+	display: inline-flex;
+	border: 0;
+	padding: 0;
+	cursor: pointer;
+}
+/* xplat-web-only:end */
+
+/* Anchored menus — panel + item rows (the Popover leaf positions it). */
+.vx-menu {
+	min-width: 140px;
+	padding: 4px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
+	corner-shape: squircle;
+	background-color: var(--color-surface);
+	color: var(--color-text);
+}
+.vx-menu-list {
+	flex-direction: column;
+}
+.vx-menu-item {
+	flex-direction: row;
+	align-items: center;
+	padding: 6px 10px;
+	border-radius: var(--radius-sm);
+}
+.vx-menu-item--disabled {
+	opacity: 0.5;
+}
+/* xplat-web-only:start — hover affordance and cursor are DOM-only */
+.vx-menu-item {
+	cursor: pointer;
+}
+.vx-menu-item:hover {
+	background-color: var(--color-border);
+}
+/* xplat-web-only:end */
+
+/* Badge — inline chip row. */
+.vx-badge {
+	flex-direction: row;
+	align-items: center;
+	border-radius: var(--radius-sm);
+	padding: 1px 6px;
+	font-size: 12px;
+	line-height: 16px;
+}
+/* xplat-web-only:start — span is inline by default; needs inline-flex */
+.vx-badge {
+	display: inline-flex;
+}
+/* xplat-web-only:end */
+
+/* Separator — hairline rule; --h spans width, --v spans height. */
+.vx-separator--h {
+	height: 1px;
+	background-color: var(--color-border);
+}
+.vx-separator--v {
+	width: 1px;
+	align-self: stretch;
+	background-color: var(--color-border);
+}
+
+/* Skeleton — placeholder block. */
+.vx-skeleton {
+	background-color: var(--color-border);
+	border-radius: var(--radius-md);
+	corner-shape: squircle;
+}
+
+/* Avatar — centered fallback inside the circle. */
+.vx-avatar {
+	align-items: center;
+	justify-content: center;
+	background-color: var(--color-border);
+}
+.vx-avatar-group {
+	flex-direction: row;
+	align-items: center;
+}
+/* xplat-web-only:start — display:flex for the div-based flex classes */
+.vx-collapsible,
+.vx-collapsible-content,
+.vx-accordion,
+.vx-accordion-item,
+.vx-checkbox-row,
+.vx-checkbox,
+.vx-radio-group,
+.vx-radio-row,
+.vx-radio,
+.vx-menu-list,
+.vx-menu-item,
+.vx-contextmenu,
+.vx-avatar,
+.vx-avatar-group,
+.vx-avatar-group-item {
+	display: flex;
+}
+.vx-checkbox-row,
+.vx-radio-row {
+	cursor: pointer;
+}
+.vx-checkbox-check {
+	display: block;
+}
+/* xplat-web-only:end */
+
+/* Phase-2 form field layer. */
+
+/* FormField — label / control / message column. */
+.vx-field {
+	flex-direction: column;
+}
+.vx-field-label {
+	font-size: 13px;
+	line-height: 20px;
+	font-weight: 500;
+	margin-bottom: 4px;
+}
+.vx-field-required {
+	color: var(--color-danger);
+}
+.vx-field-msg {
+	font-size: 12px;
+	line-height: 16px;
+	margin-top: 4px;
+	color: var(--color-text-secondary);
+}
+.vx-field-msg--error {
+	color: var(--color-danger);
+}
+.vx-fieldgroup {
+	flex-direction: column;
+}
+.vx-fieldgroup-label {
+	font-size: 13px;
+	line-height: 20px;
+	font-weight: 600;
+	margin-bottom: 8px;
+}
+
+/* InputNumber — steppers flanking a centered field. */
+.vx-inputnumber {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-inputnumber-step {
+	padding: 4px 10px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-sm);
+	align-items: center;
+	justify-content: center;
+}
+.vx-inputnumber-field {
+	width: 64px;
+	margin-left: 8px;
+	margin-right: 8px;
+	text-align: center;
+}
+.vx-inputnumber--disabled {
+	opacity: 0.5;
+}
+
+/* PinInput — row of single cells. */
+.vx-pininput {
+	flex-direction: row;
+}
+.vx-pininput-cell {
+	width: 40px;
+	margin-right: 8px;
+	text-align: center;
+}
+.vx-pininput--disabled {
+	opacity: 0.5;
+}
+
+/* Select — trigger row + check column inside the anchored listbox. */
+.vx-select-trigger {
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 6px 10px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-sm);
+}
+.vx-select--disabled {
+	opacity: 0.5;
+}
+.vx-select-placeholder {
+	color: var(--color-text-secondary);
+}
+.vx-select-caret {
+	margin-left: 8px;
+}
+.vx-select-check {
+	width: 16px;
+}
+.vx-select-search {
+	margin-bottom: 4px;
+}
+
+/* InputTags — wrapped chip row + trailing field. */
+.vx-inputtags {
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+}
+.vx-inputtags-tag {
+	flex-direction: row;
+	align-items: center;
+	padding: 1px 6px;
+	margin-right: 4px;
+	margin-bottom: 4px;
+	border-radius: var(--radius-sm);
+	background-color: var(--color-border);
+}
+.vx-inputtags-remove {
+	margin-left: 4px;
+}
+.vx-inputtags-field {
+	flex: 1;
+	min-width: 80px;
+}
+.vx-inputtags--disabled {
+	opacity: 0.5;
+}
+
+/* InputRating — glyph row; --on lights the cell. */
+.vx-rating {
+	flex-direction: row;
+}
+.vx-rating-cell {
+	padding: 2px;
+}
+.vx-rating-glyph {
+	font-size: 20px;
+	line-height: 24px;
+	color: var(--color-border);
+}
+.vx-rating-cell--on .vx-rating-glyph {
+	color: var(--color-primary);
+}
+.vx-rating--disabled {
+	opacity: 0.5;
+}
+
+/* CheckboxGroup — column/row of checkboxes. */
+.vx-checkbox-group {
+	flex-direction: column;
+}
+.vx-checkbox-group--row {
+	flex-direction: row;
+}
+/* xplat-web-only:start — display:flex for the div/span flex classes */
+.vx-field,
+.vx-fieldgroup,
+.vx-inputnumber,
+.vx-inputnumber-step,
+.vx-select-trigger,
+.vx-select-list,
+.vx-inputtags,
+.vx-inputtags-tag,
+.vx-rating,
+.vx-rating-cell,
+.vx-checkbox-group {
+	display: flex;
+}
+.vx-rating-cell {
+	cursor: pointer;
+}
+/* xplat-web-only:end */
+
+/* Phase-3 navigation & wayfinding. */
+
+/* Breadcrumb — inline trail. */
+.vx-breadcrumb {
+	flex-direction: row;
+	align-items: center;
+	flex-wrap: wrap;
+}
+.vx-breadcrumb-item {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-breadcrumb-sep {
+	margin-left: 6px;
+	margin-right: 6px;
+	color: var(--color-text-secondary);
+}
+.vx-breadcrumb-link {
+	color: var(--color-primary);
+}
+
+/* Pagination — windowed page buttons. */
+.vx-pagination {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-page-btn {
+	min-width: 28px;
+	height: 28px;
+	padding: 0 6px;
+	margin-right: 4px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-sm);
+	align-items: center;
+	justify-content: center;
+}
+.vx-page-btn--on {
+	background-color: var(--color-primary);
+	border-color: var(--color-primary);
+	color: var(--color-onprimary);
+}
+.vx-page-ellipsis {
+	margin-right: 4px;
+	color: var(--color-text-secondary);
+}
+.vx-pagination--disabled {
+	opacity: 0.5;
+}
+
+/* Stepper — dot + label cells joined by a hairline. */
+.vx-stepper {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-stepper-cell {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-stepper-line {
+	width: 24px;
+	height: 1px;
+	background-color: var(--color-border);
+}
+.vx-stepper-line--done {
+	background-color: var(--color-primary);
+}
+.vx-step {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-step-dot {
+	width: 24px;
+	height: 24px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: 50%;
+	text-align: center;
+	font-size: 12px;
+	line-height: 22px;
+	color: var(--color-text-secondary);
+}
+.vx-step--on .vx-step-dot {
+	border-color: var(--color-primary);
+	color: var(--color-primary);
+}
+.vx-step--done .vx-step-dot {
+	background-color: var(--color-primary);
+	border-color: var(--color-primary);
+	color: var(--color-onprimary);
+}
+.vx-step-label {
+	margin-left: 6px;
+}
+.vx-step--disabled {
+	opacity: 0.5;
+}
+
+/* NavigationMenu — row/column of nav items. */
+.vx-navmenu,
+.vx-navmenu--row {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-navmenu--col {
+	flex-direction: column;
+	align-items: flex-start;
+}
+.vx-navmenu-item {
+	flex-direction: row;
+	align-items: center;
+	padding: 6px 10px;
+	border-radius: var(--radius-sm);
+}
+.vx-navmenu-item--on {
+	background-color: var(--color-border);
+}
+.vx-navmenu-item--disabled {
+	opacity: 0.5;
+}
+.vx-navmenu-label {
+	margin-left: 4px;
+}
+
+/* CommandPalette — panel centered by the overlay layer. */
+.vx-commandpalette {
+	width: 360px;
+	max-width: 90%;
+	padding: 8px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
+	corner-shape: squircle;
+	background-color: var(--color-surface);
+	color: var(--color-text);
+}
+.vx-cmdk-search {
+	margin-bottom: 4px;
+}
+/* xplat-web-only:start — display, centering, and cursor are DOM-only */
+.vx-breadcrumb,
+.vx-breadcrumb-item,
+.vx-pagination,
+.vx-page-btn,
+.vx-stepper,
+.vx-stepper-cell,
+.vx-step,
+.vx-navmenu,
+.vx-navmenu-item {
+	display: flex;
+}
+.vx-cmdk-layer .vx-overlay-content {
+	position: absolute;
+	top: 15%;
+	left: 50%;
+	transform: translateX(-50%);
+}
+.vx-page-btn,
+.vx-breadcrumb-link,
+.vx-step,
+.vx-navmenu-item {
+	cursor: pointer;
+}
+/* xplat-web-only:end */
+
+/* Phase-4 data display. */
+
+/* Table — header + bounded rows (unvirtualized by design). */
+.vx-table {
+	flex-direction: column;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
+}
+.vx-table-head,
+.vx-table-row {
+	flex-direction: row;
+}
+.vx-table-th {
+	font-weight: 600;
+}
+.vx-table-cell {
+	padding: 8px 12px;
+}
+.vx-table-head {
+	border-bottom-width: 1px;
+	border-bottom-color: var(--color-border);
+}
+.vx-table-empty {
+	padding: 16px;
+	align-items: center;
+}
+
+/* Timeline — dot + connector rail beside content. */
+.vx-timeline {
+	flex-direction: column;
+}
+.vx-timeline-item {
+	flex-direction: row;
+}
+.vx-timeline-rail {
+	flex-direction: column;
+	align-items: center;
+	width: 20px;
+}
+.vx-timeline-dot {
+	width: 10px;
+	height: 10px;
+	margin-top: 5px;
+	border-radius: 50%;
+	background-color: var(--color-primary);
+	align-items: center;
+	justify-content: center;
+}
+.vx-timeline-line {
+	width: 1px;
+	flex: 1;
+	background-color: var(--color-border);
+}
+.vx-timeline-body {
 	flex-direction: column;
-	user-select: none;
+	padding-left: 10px;
+	padding-bottom: 16px;
 }
-
-/* web press feedback */
-.vx-pressable:active {
-	opacity: 0.85;
+.vx-timeline-time {
+	font-size: 12px;
+	line-height: 16px;
+	color: var(--color-text-secondary);
 }
-.vx-pressable-no-feedback:active {
-	opacity: 1;
+.vx-timeline-title {
+	font-weight: 600;
 }
-/* native press feedback (NS pseudo — dead rule on web, and vice versa) */
-.vx-pressable:pressed {
-	opacity: 0.85;
+.vx-timeline-desc {
+	color: var(--color-text-secondary);
 }
 
-/* xplat-web-only:start — overlays/toasts/popovers render through RootLayout
-   or showModal on native; these portal/positioning rules are web-only */
-.vx-overlay {
-	z-index: 1000;
+/* Tree — indented collapsible rows. */
+.vx-tree {
+	flex-direction: column;
 }
-
-.vx-overlay-shade {
-	position: absolute;
-	inset: 0;
-	background-color: rgba(0, 0, 0, 0.4);
+.vx-tree-node {
+	flex-direction: column;
 }
-
-.vx-overlay-content {
-	position: relative;
-	z-index: 1;
+.vx-tree-row {
+	flex-direction: row;
+	align-items: center;
+	padding: 4px 0;
 }
-
-.vx-popover {
-	z-index: 1001;
+.vx-tree-row--disabled {
+	opacity: 0.5;
 }
-
-.vx-popover-backdrop {
-	background-color: transparent;
+.vx-tree-caret {
+	width: 14px;
+	margin-left: 4px;
 }
 
-.vx-toast-host {
-	position: fixed;
-	z-index: 1002;
-	left: 0;
-	right: 0;
-	display: flex;
-	justify-content: center;
-	pointer-events: none;
+/* Alert — icon + body callout; tone picks border/text colors. */
+.vx-alert {
+	flex-direction: row;
+	padding: 10px 12px;
+	border-width: 1px;
+	border-radius: var(--radius-md);
+	corner-shape: squircle;
+	border-color: var(--color-border);
 }
-
-.vx-toast-top {
-	top: 24px;
+.vx-alert-body {
+	flex-direction: column;
+	flex: 1;
+	margin-left: 8px;
 }
-.vx-toast-bottom {
-	bottom: 24px;
+.vx-alert-title {
+	font-weight: 600;
 }
-
-.vx-toast {
-	pointer-events: auto;
+.vx-alert--error {
+	border-color: var(--color-danger);
 }
-/* xplat-web-only:end */
-
-/* auto-grow owns height — the manual resize handle has no native analog */
-/* xplat-web-only:start */
-.vx-textarea {
-	resize: none;
+.vx-alert--warning {
+	border-color: var(--color-warning, #d9a400);
+}
+.vx-alert--success {
+	border-color: var(--color-success, #2e9e5b);
+}
+.vx-alert--info {
+	border-color: var(--color-primary);
 }
-/* xplat-web-only:end */
 
-/* Modal is a real top-layer dialog on web. Presentation variants keep their
-   sizing and anchoring in tokens so both the component and openModal share it. */
-/* xplat-web-only:start */
-.vx-modal {
-	width: 480px;
-	max-width: 90%;
-	max-height: 90%;
-	padding: 24px;
-	border: 1px solid var(--color-border);
-	border-radius: var(--radius-xl);
+/* Card — sectioned container. */
+.vx-card {
+	flex-direction: column;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
 	corner-shape: squircle;
-	color: var(--color-text);
 	background-color: var(--color-surface);
 }
-
-.vx-modal::backdrop {
-	background: rgba(0, 0, 0, 0.4);
+.vx-card-header {
+	padding: 12px;
+	border-bottom-width: 1px;
+	border-bottom-color: var(--color-border);
 }
-
-.vx-modal--dialog {
-	width: 480px;
-	max-width: 90%;
+.vx-card-body {
+	padding: 12px;
+	flex-direction: column;
+}
+.vx-card-footer {
+	padding: 12px;
+	border-top-width: 1px;
+	border-top-color: var(--color-border);
 }
 
-.vx-modal--sheet {
-	width: 100%;
-	max-width: none;
-	max-height: 85%;
-	position: fixed;
-	inset: auto 0 0;
-	margin: 0;
-	border-top-left-radius: var(--radius-xl);
-	border-top-right-radius: var(--radius-xl);
+/* Chip — pressable pill with selected + remove states. */
+.vx-chip {
+	flex-direction: row;
+	align-items: center;
+	padding: 3px 10px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
 	corner-shape: squircle;
+	font-size: 13px;
 }
-
-.vx-modal--fullscreen {
-	width: 100%;
-	max-width: none;
-	height: 100%;
-	max-height: none;
-	margin: 0;
-	border-radius: 0;
+.vx-chip--on {
+	background-color: var(--color-primary);
+	border-color: var(--color-primary);
+	color: var(--color-onprimary);
+}
+.vx-chip--disabled {
+	opacity: 0.5;
+}
+.vx-chip-remove {
+	margin-left: 6px;
 }
 
-/* Modal ROUTES (pushRoute presentation:'modal') — the URL stays underneath,
-   so the overlay is a fixed layer over the shell rather than a dialog. */
-.vx-modalroute {
-	position: fixed;
-	inset: 0;
-	z-index: 1000;
-	display: flex;
-	align-items: stretch;
-	justify-content: stretch;
+/* Kbd — keycap glyph. */
+.vx-kbd {
+	padding: 1px 5px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-bottom-width: 2px;
+	border-radius: var(--radius-sm);
+	font-size: 12px;
 }
 
-.vx-modalroute-shade {
-	position: absolute;
-	inset: 0;
-	border: 0;
-	padding: 0;
-	background: rgba(0, 0, 0, 0.4);
-	cursor: default;
+/* Empty — centered placeholder. */
+.vx-empty {
+	flex-direction: column;
+	align-items: center;
+	padding: 24px;
+}
+.vx-empty-title {
+	font-weight: 600;
+	margin-top: 8px;
+}
+.vx-empty-desc {
+	color: var(--color-text-secondary);
+	margin-top: 2px;
 }
 
-.vx-modalroute-body {
-	position: relative;
-	flex: 1;
-	min-width: 0;
-	overflow: auto;
-	color: var(--color-text);
+/* Banner — notice strip. */
+.vx-banner {
+	flex-direction: row;
+	align-items: center;
+	padding: 8px 12px;
+	border-width: 1px;
+	border-color: var(--color-border);
+	border-radius: var(--radius-md);
 	background-color: var(--color-surface);
 }
-/* xplat-web-only:end */
-
-/* xplat-web-only:start — placeholder pseudos are DOM-only. Muted like
-   real placeholder text, not currentColor (a full-opacity hint reads as
-   a typed value); --placeholder-color is the per-field prop escape. */
-input::placeholder,
-textarea::placeholder {
-	color: var(--placeholder-color, var(--color-text-secondary));
+.vx-banner-body {
+	flex-direction: column;
+	flex: 1;
+	margin-left: 8px;
 }
-/* xplat-web-only:end */
-
-/* xplat-web-only:start — form controls don't inherit the body font in the
-   DOM (UA stylesheet wins); without this they render in the UA face. */
-input,
-textarea,
-select,
-button {
-	font-family: inherit;
+.vx-banner-dismiss {
+	margin-left: 8px;
 }
-/* xplat-web-only:end */
 
-/* xplat-web-only:start — native ActivityIndicator is the NS widget */
-.vx-spinner {
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	box-sizing: border-box;
-	border: 2px solid currentColor;
-	border-right-color: transparent;
-	border-radius: 50%;
-	animation: vx-spinner-turn 0.8s linear infinite;
+/* User — avatar + text column. */
+.vx-user {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-user-body {
+	flex-direction: column;
+	margin-left: 10px;
+}
+.vx-user-name {
+	font-weight: 600;
+}
+.vx-user-desc {
+	font-size: 12px;
+	line-height: 16px;
+	color: var(--color-text-secondary);
 }
 
-@keyframes vx-spinner-turn {
-	to {
-		transform: rotate(360deg);
-	}
+/* ProgressGroup — stacked labeled meters. */
+.vx-progressgroup {
+	flex-direction: column;
+}
+.vx-progressgroup-row {
+	flex-direction: row;
+	align-items: center;
+}
+.vx-progressgroup-label {
+	margin-left: 8px;
+}
+/* xplat-web-only:start — display:flex for the div-based flex classes */
+.vx-table,
+.vx-table-head,
+.vx-table-row,
+.vx-timeline,
+.vx-timeline-item,
+.vx-timeline-rail,
+.vx-timeline-body,
+.vx-tree,
+.vx-tree-node,
+.vx-tree-row,
+.vx-alert,
+.vx-alert-body,
+.vx-card,
+.vx-card-body,
+.vx-banner,
+.vx-banner-body,
+.vx-user,
+.vx-user-body,
+.vx-progressgroup,
+.vx-progressgroup-row {
+	display: flex;
+}
+.vx-table-row--pressable,
+.vx-tree-row,
+.vx-user--pressable,
+.vx-banner-dismiss,
+.vx-chip-remove {
+	cursor: pointer;
 }
 /* xplat-web-only:end */
 
@@ -378,35 +1533,6 @@ button {
 	font-weight: bold;
 }
 
-/* xplat-web-only:start — glass material is real on iOS 26+; web approximates
-   with backdrop-filter. The class also lands on native elements (inert) so
-   apps can style their own fallback — but these rules are DOM-only. */
-.vx-glass {
-	background-color: color-mix(in srgb, var(--color-surface) 30%, transparent);
-	border: 1px solid rgba(255, 255, 255, 0.25);
-}
-
-@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-	.vx-glass {
-		background-color: color-mix(in srgb, var(--color-surface) 20%, transparent);
-		-webkit-backdrop-filter: blur(20px) saturate(1.6);
-		backdrop-filter: blur(20px) saturate(1.6);
-	}
-}
-
-.vx-glass--clear {
-	background-color: color-mix(in srgb, var(--color-surface) 12%, transparent);
-	border-color: rgba(255, 255, 255, 0.15);
-}
-
-@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-	.vx-glass--clear {
-		-webkit-backdrop-filter: blur(8px) saturate(1.3);
-		backdrop-filter: blur(8px) saturate(1.3);
-	}
-}
-/* xplat-web-only:end */
-
 /* utilities (hand-written subset — do NOT adopt Tailwind until
    NativeScript/tailwind#226 is resolved; the plugin strips core-supported
    props incl. gap, drops all @media, and rewrites invisible→collapse) */
@@ -420,14 +1546,19 @@ button {
 /* Flex divergence guards — NS FlexboxLayout diverges from web flexbox on
  * shrinkability: grow children never shrink below intrinsic width, fixed
  * children get crushed, and auto-height rows re-measure grow children at
- * zero height. min-w-0/min-h-0 let a grow child shrink; shrink-0 protects
- * a fixed-size child. All three are plain CSS on web. */
+ * zero height. The shared `* { flex-shrink: 0 }` default (RN semantics)
+ * makes .shrink the opt-in for a shrinkable child; min-w-0/min-h-0 lower
+ * the min-content floor so it can actually shrink, and shrink-0 remains
+ * for local overrides. All four are plain CSS on web. */
 .min-w-0 {
 	min-width: 0;
 }
 .min-h-0 {
 	min-height: 0;
 }
+.shrink {
+	flex-shrink: 1;
+}
 .shrink-0 {
 	flex-shrink: 0;
 }
@@ -462,17 +1593,25 @@ button {
 	gap: 24px;
 }
 
+/* line-height is REQUIRED on native: without it a Label's measured height
+   misses the font's line metrics, and Android clips the descenders/bottom
+   of the glyphs (observed: section-labels 21–29px bounds for 12sp text at
+   3.25x). Tailwind pairs every text-* size with a leading, same here. */
 .text-2xl {
 	font-size: 28px;
+	line-height: 36px;
 }
 .text-xl {
 	font-size: 20px;
+	line-height: 28px;
 }
 .text-lg {
 	font-size: 18px;
+	line-height: 28px;
 }
 .text-sm {
 	font-size: 13px;
+	line-height: 20px;
 }
 .font-bold {
 	font-weight: bold;
@@ -581,6 +1720,9 @@ a.chip {
 .vx-tab.active {
 	color: var(--color-text);
 }
+.vx-tabicon {
+	margin-right: 6px;
+}
 
 /* xplat-web-only:start — DOM defaults are display:block (div) and
    inline-block (button); every flex-bearing vx- class needs an explicit
@@ -689,10 +1831,6 @@ button.vx-tab {
 	border-bottom-color: var(--color-border);
 }
 
-.vx-list {
-	flex-grow: 1;
-}
-
 .gap-2 {
 	gap: 8px;
 }
@@ -700,27 +1838,16 @@ button.vx-tab {
 /* In-window sheet — bottom-anchored panel (matches the native RootLayout
    sheet). Layer is pointer-events:none; backdrop + panel re-enable. */
 .vx-sheet-layer {
-	position: fixed;
-	inset: 0;
 	z-index: 1100;
-	pointer-events: none;
 }
 
 .vx-sheet-backdrop {
-	position: absolute;
-	inset: 0;
 	background: rgba(0, 0, 0, 0.4);
-	pointer-events: auto;
 }
 
 .vx-sheet {
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: 0;
 	max-height: 85%;
 	padding: 24px;
-	overflow: auto;
 	border-width: 1px;
 	border-color: var(--color-border);
 	border-top-left-radius: var(--radius-xl);
@@ -728,5 +1855,58 @@ button.vx-tab {
 	corner-shape: squircle;
 	background-color: var(--color-surface);
 	color: var(--color-text);
+}
+
+/* xplat-web-only:start — DOM positioning + hit-testing for the sheet.
+   The native leaf renders on RootLayout with its own geometry. */
+.vx-sheet-layer {
+	position: fixed;
+	inset: 0;
+	pointer-events: none;
+}
+
+.vx-sheet-backdrop,
+.vx-sheet {
+	position: absolute;
+	inset: 0;
 	pointer-events: auto;
 }
+
+.vx-sheet {
+	top: auto;
+	bottom: 0;
+	overflow: auto;
+}
+/* xplat-web-only:end */
+
+.vx-sheet-grabber {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 28px;
+}
+
+.vx-sheet-grip {
+	width: 36px;
+	height: 4px;
+	border-radius: 999px;
+	background-color: var(--color-text-secondary);
+	opacity: 0.4;
+}
+
+/* xplat-web-only:start — detents size the panel to the largest fraction
+   (overriding the 85% cap) and overlay the grabber; native stacks it as a
+   top-aligned grid child. touch-action keeps drags off native scroll. */
+.vx-sheet-detents {
+	max-height: none;
+}
+.vx-sheet-detents > .vx-sheet-grabber {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 2;
+	cursor: grab;
+	touch-action: none;
+}
+/* xplat-web-only:end */