@octane-xplat/ui 0.5.0 → 0.7.0

package/dist/web/ui.js

@@ -1,53 +1,93 @@
-import { View } from "./ui5.js";
-import { Row } from "./ui6.js";
-import { Grid } from "./ui7.js";
-import { Stack } from "./ui8.js";
-import { Absolute } from "./ui9.js";
-import { LiquidGlass } from "./ui10.js";
-import { LiquidGlassContainer } from "./ui11.js";
-import { Spacer } from "./ui12.js";
-import { Text } from "./ui13.js";
-import { RichText, RichTextSpan } from "./ui14.js";
-import { Pressable } from "./ui15.js";
-import { Link } from "./ui16.js";
-import { deriveRouteManifest } from "./ui17.js";
-import { canGoBack, currentModalRoute, currentRoute, hrefFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./ui18.js";
-import { NavLink } from "./ui19.js";
-import { TextInput } from "./ui20.js";
-import { TextArea } from "./ui21.js";
-import { List } from "./ui22.js";
-import { ScrollView } from "./ui23.js";
-import { ScrollBox } from "./ui24.js";
-import { Image } from "./ui25.js";
-import { Modal } from "./ui26.js";
-import { getColorScheme, useColorScheme } from "./ui27.js";
-import { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme } from "./ui29.js";
-import { openModal } from "./ui30.js";
-import { Overlay } from "./ui31.js";
-import { Popover } from "./ui33.js";
-import { Hoverable } from "./ui34.js";
-import { showToast } from "./ui35.js";
-import { useAnimation } from "./ui36.js";
-import { styled } from "./ui37.js";
-import { openWindow } from "./ui38.js";
-import { Screen } from "./ui39.js";
-import { Tabs } from "./ui40.js";
-import { Switch } from "./ui41.js";
-import { useSafeAreaInsets } from "./ui42.js";
-import { SafeArea } from "./ui43.js";
-import { KeyboardAvoiding } from "./ui44.js";
-import { Drawer } from "./ui45.js";
-import { useMeasure } from "./ui46.js";
-import { ActivityIndicator } from "./ui48.js";
-import { Meter } from "./ui50.js";
-import { Slider } from "./ui51.js";
-import { registerIcon, registerIcons } from "./ui52.js";
-import { Icon } from "./ui53.js";
-import { Heading } from "./ui54.js";
-import { PlatformBadge } from "./ui55.js";
-import { getStack, registerStack, stackEntries } from "./ui56.js";
-import { createStore } from "./ui57.js";
-import { useStore } from "./ui58.js";
-import { Sheet } from "./ui59.js";
-import { closeSheet, openSheet } from "./ui60.js";
-export { Absolute, ActivityIndicator, View as Column, Drawer, Grid, Heading, Hoverable, Icon, Image, KeyboardAvoiding, Link, LiquidGlass, LiquidGlassContainer, List, Meter, Modal, NavLink, Overlay, PlatformBadge, Popover, Pressable, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, Sheet, Slider, Spacer, Stack, Switch, Tabs, Text, TextArea, TextInput, View, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, onThemeSchemeChange, openModal, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };
+import { View } from "./View.web.tsrx.js";
+import { Row } from "./Row.web.tsrx.js";
+import { Grid } from "./Grid.web.tsrx.js";
+import { Stack } from "./Stack.web.tsrx.js";
+import { Absolute } from "./Absolute.web.tsrx.js";
+import { setTranslate } from "./translate.web.js";
+import { Spacer } from "./Spacer.web.tsrx.js";
+import { Text } from "./Text.web.tsrx.js";
+import { RichText, RichTextSpan } from "./RichText.web.tsrx.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
+import { Button } from "./Button.web.tsrx.js";
+import { Collapsible } from "./Collapsible.web.tsrx.js";
+import { Accordion } from "./Accordion.web.tsrx.js";
+import { Checkbox } from "./Checkbox.web.tsrx.js";
+import { RadioGroup } from "./RadioGroup.web.tsrx.js";
+import { getColorScheme, useColorScheme } from "./theme/colorScheme.web.js";
+import { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme } from "./theme/theme-scheme.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { registerIcon, registerIcons } from "./icons.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { DropdownMenu } from "./DropdownMenu.web.tsrx.js";
+import { ContextMenu } from "./ContextMenu.web.tsrx.js";
+import { Badge } from "./Badge.web.tsrx.js";
+import { Separator } from "./Separator.web.tsrx.js";
+import { Skeleton } from "./Skeleton.web.tsrx.js";
+import { Avatar } from "./Avatar.web.tsrx.js";
+import { AvatarGroup } from "./AvatarGroup.web.tsrx.js";
+import { FormField } from "./FormField.web.tsrx.js";
+import { FieldGroup } from "./FieldGroup.web.tsrx.js";
+import { ListItem } from "./ListItem.web.tsrx.js";
+import { TextInput } from "./TextInput.web.tsrx.js";
+import { InputNumber } from "./InputNumber.web.tsrx.js";
+import { PinInput } from "./PinInput.web.tsrx.js";
+import { Select } from "./Select.web.tsrx.js";
+import { Combobox, InputMenu, SelectMenu } from "./aliases.web.tsrx.js";
+import { InputTags } from "./InputTags.web.tsrx.js";
+import { InputRating } from "./InputRating.web.tsrx.js";
+import { CheckboxGroup } from "./CheckboxGroup.web.tsrx.js";
+import { Breadcrumb } from "./Breadcrumb.web.tsrx.js";
+import { Pagination } from "./Pagination.web.tsrx.js";
+import { Stepper } from "./Stepper.web.tsrx.js";
+import { NavigationMenu } from "./NavigationMenu.web.tsrx.js";
+import { Overlay } from "./Overlay.web.tsrx.js";
+import { CommandPalette } from "./CommandPalette.web.tsrx.js";
+import { Table } from "./Table.web.tsrx.js";
+import { Timeline } from "./Timeline.web.tsrx.js";
+import { Tree } from "./Tree.web.tsrx.js";
+import { Alert } from "./Alert.web.tsrx.js";
+import { Card } from "./Card.web.tsrx.js";
+import { Chip } from "./Chip.web.tsrx.js";
+import { Kbd } from "./Kbd.web.tsrx.js";
+import { Empty } from "./Empty.web.tsrx.js";
+import { Banner } from "./Banner.web.tsrx.js";
+import { User } from "./User.web.tsrx.js";
+import { Meter } from "./Meter.web.tsrx.js";
+import { ProgressGroup } from "./ProgressGroup.web.tsrx.js";
+import { Link } from "./Link.web.tsrx.js";
+import { defineRoutes, deriveRouteManifest, mergeRouteManifests } from "./route-table.js";
+import { addBackInterceptor, addRoutes, canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./route.web.js";
+import { NavLink } from "./NavLink.web.tsrx.js";
+import { TextArea } from "./TextArea.web.tsrx.js";
+import { SearchInput } from "./SearchInput.web.tsrx.js";
+import { SegmentedControl } from "./SegmentedControl.web.tsrx.js";
+import { ScrollView } from "./ScrollView.web.tsrx.js";
+import { ScrollBox } from "./ScrollBox.web.tsrx.js";
+import { VirtualList } from "./VirtualList.web.tsrx.js";
+import { Image } from "./Image.web.tsrx.js";
+import { WebView } from "./WebView.web.tsrx.js";
+import { Hoverable } from "./Hoverable.web.tsrx.js";
+import { Tooltip } from "./Tooltip.web.tsrx.js";
+import { showToast } from "./toast-anchor.web.tsrx.js";
+import { useAnimation } from "./anim.web.tsrx.js";
+import { styled } from "./styled.web.tsrx.js";
+import { openWindow } from "./windows.web.js";
+import { Screen } from "./Screen.web.tsrx.js";
+import { Tabs } from "./Tabs.web.tsrx.js";
+import { Switch } from "./Switch.web.tsrx.js";
+import { useSafeAreaInsets } from "./safeAreaInsets.web.tsrx.js";
+import { SafeArea } from "./SafeArea.web.tsrx.js";
+import { Drawer } from "./Drawer.web.tsrx.js";
+import { useMeasure } from "./useMeasure.web.tsrx.js";
+import { Slider } from "./Slider.web.tsrx.js";
+import { Heading } from "./Heading.web.tsrx.js";
+import { isNative } from "./platform.web.js";
+import { getStack, registerStack, stackEntries } from "./stacks.web.js";
+import { useBackInterceptor } from "./use-back.web.tsrx.js";
+import { createStore } from "./store.js";
+import { useStore } from "./use-store.web.tsrx.js";
+import { Sheet } from "./Sheet.web.tsrx.js";
+import { closeSheet, openSheet } from "./sheet-service.web.js";
+import "./index.shared.web.js";
+export { Absolute, Accordion, ActivityIndicator, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, Chip, Collapsible, View as Column, Combobox, CommandPalette, ContextMenu, Drawer, DropdownMenu, Empty, FieldGroup, FormField, Grid, Heading, Hoverable, Icon, Image, InputMenu, InputNumber, InputRating, InputTags, Kbd, Link, ListItem, Meter, NavLink, NavigationMenu, Overlay, Pagination, PinInput, Popover, Pressable, ProgressGroup, RadioGroup, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, SearchInput, SegmentedControl, Select, SelectMenu, Separator, Sheet, Skeleton, Slider, Spacer, Stack, Stepper, Switch, Table, Tabs, Text, TextArea, TextInput, Timeline, Tooltip, Tree, User, View, VirtualList, WebView, addBackInterceptor, addRoutes, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, defineRoutes, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, isNative, layoutsFor as layoutsForRoute, mergeRouteManifests, onThemeSchemeChange, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, setTranslate, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useBackInterceptor, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };

package/dist/web/use-back.web.tsrx.js

@@ -0,0 +1,9 @@
+import { addBackInterceptor } from "./route.web.js";
+import { hookSlots, useEffect } from "octane";
+//#region src/use-back.web.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function useBackInterceptor(fn) {
+	useEffect(() => addBackInterceptor(fn), [fn], _h$0);
+}
+//#endregion
+export { useBackInterceptor };

package/dist/web/virtual-list-layout.js

@@ -0,0 +1,146 @@
+function createVirtualListEntries(items, keyExtractor, getItemType) {
+	const seen = /* @__PURE__ */ new Set();
+	return items.map((item, index) => {
+		const key = keyExtractor(item, index);
+		const type = getItemType?.(item, index) ?? "default";
+		assertKey(key, "keyExtractor");
+		assertKey(type, "getItemType");
+		const keyToken = JSON.stringify([typeof key, key]);
+		if (seen.has(keyToken)) throw new Error(`VirtualList keyExtractor returned a duplicate key at index ${index}: ${String(key)}`);
+		seen.add(keyToken);
+		return {
+			item,
+			index,
+			key,
+			type,
+			typeKey: JSON.stringify([typeof type, type]),
+			rowKey: virtualListRowKey(key, type)
+		};
+	});
+}
+function virtualListMeasurementKey(rowKey, hasSeparator) {
+	return rowKey + (hasSeparator ? ":separator" : ":last");
+}
+function estimateVirtualListSizes(entries, hasSeparator, width, measurements) {
+	const totals = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		const cacheKey = virtualListMeasurementKey(entry.rowKey, hasSeparator && entry.index < entries.length - 1);
+		const cached = measurements.get(cacheKey);
+		if (!cached) continue;
+		const total = totals.get(entry.typeKey) ?? {
+			height: 0,
+			count: 0
+		};
+		total.height += cached.height;
+		total.count++;
+		totals.set(entry.typeKey, total);
+	}
+	return entries.map((entry) => {
+		const cacheKey = virtualListMeasurementKey(entry.rowKey, hasSeparator && entry.index < entries.length - 1);
+		const cached = measurements.get(cacheKey);
+		if (cached && width > 0 && cached.width > 0 && Math.abs(cached.width - width) < .5) return cached.height;
+		const total = totals.get(entry.typeKey);
+		return total && total.count >= 4 ? total.height / total.count : 48;
+	});
+}
+/** Prefix-size index for variable-height rows. Updates and offset lookups are
+*  logarithmic, so measuring a row does not scan the whole data set. */
+var VirtualListSizeIndex = class {
+	constructor() {
+		this.sizes = /* @__PURE__ */ new Float64Array(0);
+		this.tree = /* @__PURE__ */ new Float64Array(1);
+	}
+	get length() {
+		return this.sizes.length;
+	}
+	get total() {
+		return this.prefix(this.length);
+	}
+	reset(sizes) {
+		this.sizes = Float64Array.from(sizes, normalizeSize);
+		this.tree = new Float64Array(this.sizes.length + 1);
+		for (let index = 1; index <= this.sizes.length; index++) {
+			this.tree[index] += this.sizes[index - 1];
+			const parent = index + (index & -index);
+			if (parent <= this.sizes.length) this.tree[parent] += this.tree[index];
+		}
+	}
+	get(index) {
+		return this.sizes[index] ?? 0;
+	}
+	set(index, size) {
+		if (index < 0 || index >= this.sizes.length) return 0;
+		const next = normalizeSize(size);
+		const delta = next - this.sizes[index];
+		if (delta === 0) return 0;
+		this.sizes[index] = next;
+		for (let node = index + 1; node < this.tree.length; node += node & -node) this.tree[node] += delta;
+		return delta;
+	}
+	/** Sum of the first `count` row heights. */
+	prefix(count) {
+		let node = Math.max(0, Math.min(this.sizes.length, Math.floor(count)));
+		let sum = 0;
+		while (node > 0) {
+			sum += this.tree[node];
+			node -= node & -node;
+		}
+		return sum;
+	}
+	/** Index of the row containing `offset`; exact row boundaries select the
+	*  row that starts at that boundary. */
+	indexAt(offset) {
+		if (this.sizes.length === 0) return 0;
+		const target = Math.max(0, Math.min(this.total, Number.isFinite(offset) ? offset : 0));
+		let index = 0;
+		let sum = 0;
+		let bit = 1;
+		while (bit * 2 <= this.sizes.length) bit *= 2;
+		for (; bit > 0; bit = Math.floor(bit / 2)) {
+			const next = index + bit;
+			if (next <= this.sizes.length && sum + this.tree[next] <= target) {
+				index = next;
+				sum += this.tree[next];
+			}
+		}
+		return Math.min(index, this.sizes.length - 1);
+	}
+};
+function virtualListRange(sizes, scrollOffset, viewportSize, overscanSize = viewportSize) {
+	if (sizes.length === 0) return {
+		start: 0,
+		end: 0,
+		top: 0,
+		bottom: 0
+	};
+	const offset = Math.max(0, Number.isFinite(scrollOffset) ? scrollOffset : 0);
+	const viewport = Math.max(0, Number.isFinite(viewportSize) ? viewportSize : 0);
+	const overscan = Math.max(0, Number.isFinite(overscanSize) ? overscanSize : 0);
+	const start = sizes.indexAt(Math.max(0, offset - overscan));
+	const end = Math.min(sizes.length, Math.max(start + 1, sizes.indexAt(offset + viewport + overscan) + 1));
+	return {
+		start,
+		end,
+		top: sizes.prefix(start),
+		bottom: Math.max(0, sizes.total - sizes.prefix(end))
+	};
+}
+/** Renderer keys include the item type so changing a key's type remounts its
+*  row instead of carrying component state into an incompatible template. */
+function virtualListRowKey(key, type) {
+	return JSON.stringify([
+		typeof key,
+		key,
+		typeof type,
+		type
+	]);
+}
+function assertKey(value, name) {
+	if (typeof value !== "string" && typeof value !== "number" || typeof value === "number" && !Number.isFinite(value)) throw new Error(`VirtualList ${name} must return a finite number or string`);
+}
+function normalizeSize(size) {
+	if (!Number.isFinite(size)) return .01;
+	return Math.max(.01, size);
+}
+//#endregion
+export { VirtualListSizeIndex, createVirtualListEntries, estimateVirtualListSizes, virtualListMeasurementKey, virtualListRange, virtualListRowKey };

package/dist/web/web/index.js

@@ -0,0 +1,3 @@
+import { Hoverable } from "../Hoverable.web.tsrx.js";
+import { Tooltip } from "../Tooltip.web.tsrx.js";
+export { Hoverable, Tooltip };

package/package.json

@@ -1,41 +1,68 @@
 {
   "name": "@octane-xplat/ui",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "files": [
     "dist",
     "types",
-    "src/theme/tokens.css"
+    "src",
+    "platforms"
   ],
   "type": "module",
   "exports": {
     ".": {
-      "types": "./types/index.d.ts",
-      "web": "./dist/web/ui.js",
-      "native": "./dist/native/ui.js",
-      "default": "./dist/native/ui.js"
+      "macos": {
+        "types": "./types/index.macos.d.ts",
+        "default": "./src/index.macos.ts"
+      },
+      "web": {
+        "types": "./types/generated/index.web.d.ts",
+        "default": "./dist/web/ui.js"
+      },
+      "native": {
+        "types": "./types/generated/index.mobile.d.ts",
+        "default": "./dist/native/ui.js"
+      },
+      "types": "./types/generated/index.d.ts",
+      "default": "./dist/native/shared.js"
+    },
+    "./ios": {
+      "types": "./types/generated/ios/index.d.ts",
+      "native": "./dist/native/ios/index.js"
+    },
+    "./android": {
+      "types": "./types/generated/android/index.d.ts",
+      "native": "./dist/native/android/index.js"
+    },
+    "./native": {
+      "types": "./types/generated/native/index.d.ts",
+      "native": "./dist/native/native/index.js"
+    },
+    "./web": {
+      "types": "./types/generated/web/index.d.ts",
+      "web": "./dist/web/web/index.js"
     },
     "./theme/tokens.css": "./src/theme/tokens.css"
   },
   "devDependencies": {
     "@nativescript-community/octane": "0.2.1",
-    "@nativescript-community/ui-canvas": "4.6.52",
     "@nativescript-community/ui-drawer": "0.1.32",
-    "@nativescript-community/ui-svg": "0.2.24",
     "@nativescript/core": "9.1.2",
-    "@octanejs/vite-plugin": "0.1.60",
+    "@nativescript/types": "9.0.0",
+    "@octanejs/vite-plugin": "0.1.61",
+    "@tsrx/typescript-plugin": "0.4.11",
     "jsdom": "30.1.1",
-    "octane": "0.5.0",
+    "octane": "0.6.3",
+    "tsrx-typegen": "0.1.0",
+    "typescript": "5.9.3",
     "vite": "8.3.0",
     "vitest": "5.0.1"
   },
   "peerDependencies": {
     "@nativescript-community/gesturehandler": ">=2.0.8 <3",
     "@nativescript-community/octane": ">=0.2.1 <1",
-    "@nativescript-community/ui-canvas": ">=4.6.52 <5",
     "@nativescript-community/ui-drawer": ">=0.1.32 <1",
-    "@nativescript-community/ui-svg": ">=0.2.24 <1",
     "@nativescript/core": ">=9.1.0 <10",
-    "octane": ">=0.1.51 <1"
+    "octane": ">=0.6.3 <1"
   },
   "peerDependenciesMeta": {
     "@nativescript-community/gesturehandler": {
@@ -51,8 +78,20 @@
       "optional": true
     }
   },
+  "nativescript": {
+    "platforms": {
+      "ios": "9.1.0",
+      "android": "9.1.0"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octane-xplat/octane-xplat.git",
+    "directory": "packages/ui"
+  },
   "scripts": {
-    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json",
+    "build": "node ../../scripts/sync-ui-barrels.mjs --check && vite build && vite build --mode native && tsrx-typegen --target ui && node ../../scripts/check-native-dist.mjs",
+    "test:packed": "node tests/packed-consumer.mjs",
     "test:native": "vitest run --config vitest.native.config.mts"
   }
 }

package/platforms/android/include.gradle

@@ -0,0 +1,8 @@
+repositories {
+	google()
+	mavenCentral()
+}
+
+dependencies {
+	implementation 'com.caverock:androidsvg-aar:1.4'
+}

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>
+}