@ng-native/expo 0.2.0 → 0.4.0

package/dist/expo-ui-components.js

@@ -1,5 +1,5 @@
 /**
- * Typed components for the `@expo/ui` SwiftUI views an app reaches for most.
+ * Typed components for the `@expo/ui` views an app reaches for most, named and shaped as SwiftUI's.
  *
  * `EXPO_UI_VIEWS` makes every view reachable by name, and a name is all the renderer needs. What a
  * name cannot give is a type: under strict templates an unknown element is an error, and so is
@@ -7,22 +7,34 @@
  * props' types and whose host bindings pass each one straight to the node, so nothing changes at
  * runtime. An unset input stays `undefined` and never reaches native.
  *
- * Events are declared as outputs so that `$event` is typed, and are never emitted. Angular binds a
- * template's `(dateChange)` to the output *and* to the element, and it is the element's own event
- * that arrives, once. Emitting from a host listener as well would deliver it twice; a host listener
- * of the same name as the output listens to the output itself and recurses. So subscribe in a
- * template, not to the output in code.
+ * Events are declared as outputs so that `$event` is typed. SwiftUI's events are never emitted:
+ * Angular binds a template's `(dateChange)` to the output *and* to the element, and it is the
+ * element's own event that arrives, once. Emitting from a host listener as well would deliver it
+ * twice; a host listener of the same name as the output listens to the output itself and recurses.
+ * So subscribe in a template, not to the output in code.
+ *
+ * Where Compose names a prop or an event differently, a component sends Android its own names and
+ * emits the output from a host listener for Compose's event, which SwiftUI never sends. Only a few
+ * do: the toggle, slider, button, progress, stacks and slot, and the date picker.
  *
  * Only the views and props an app has needed are here; the rest stay names, as before. Add a view
  * when a template wants it typed, from `@expo/ui`'s own props for it.
  *
  * Still register the names with `registerExpoUiViews`: the component types the element, the
- * registration is what makes it commit as the SwiftUI view.
+ * registration is what makes it commit as the SwiftUI or Compose view.
  */
-import { Component, DestroyRef, ElementRef, booleanAttribute, computed, inject, input, model, output, } from '@angular/core';
-import { HostEngine, nativePlatform, } from '@ng-native/fabric';
+import { Component, DestroyRef, forwardRef, ElementRef, booleanAttribute, computed, inject, input, model, output, signal, } from '@angular/core';
+import { HostEngine, keepNativeView, nativePlatform, } from '@ng-native/fabric';
 import { optionalBoolean, optionalNumber } from "./transforms.js";
 import * as i0 from "@angular/core";
+/**
+ * Says the component's host is the `@expo/ui` view its selector is registered as. A component of
+ * an app's own with a `ui-` selector does not, and its host is a plain view.
+ */
+function nativeView() {
+    keepNativeView(inject(ElementRef).nativeElement);
+    return true;
+}
 /**
  * The bridge from Yoga's layout to SwiftUI's; every other `ui-*` view goes inside one.
  * `matchContents` sizes the host to the SwiftUI content rather than the other way round, on both
@@ -31,6 +43,7 @@ import * as i0 from "@angular/core";
  * drawn in it spills outside it, where it can be seen but not touched or read by VoiceOver.
  */
 export class UiHost {
+    nativeView = nativeView();
     matchContents = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "matchContents" }] : /* istanbul ignore next */ []));
     matchVertical = computed(() => {
@@ -64,6 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { matchContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchContents", required: false }] }], ignoreSafeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreSafeArea", required: false }] }], useViewportSizeMeasurement: [{ type: i0.Input, args: [{ isSignal: true, alias: "useViewportSizeMeasurement", required: false }] }] } });
 /** A SwiftUI `Menu`. Its trigger is the `label` or a `<ui-slot name="label">`; its items are children. */
 export class UiMenu {
+    nativeView = nativeView();
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     /** An SF Symbol name. */
@@ -89,8 +103,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     },
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], systemImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemImage", required: false }] }], accessibilityLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabel", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
-/** A SwiftUI `Button`, as a menu item or on its own. */
+/**
+ * Views of the app's own inside SwiftUI or Compose content: the way back from a `ui-host`. What
+ * it holds is laid out by the engine, as anywhere else, and takes presses as anywhere else, so a
+ * row drawn with the app's own components can be a context menu's trigger or a sheet's body.
+ *
+ * It holds one element. `matchContents` sizes it to that element, both ways: the element needs a
+ * width of its own, since nothing here stretches it. Without `matchContents` it fills what the
+ * SwiftUI or Compose view around it offers, which inside a view sized to its content is a width
+ * and no height.
+ */
+export class UiViewHost {
+    nativeView = nativeView();
+    matchContents = input(undefined, { ...(ngDevMode ? { debugName: "matchContents" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /**
+     * For content presented in a window of its own, a sheet or a popover, where nothing above it
+     * delivers its touches: it then takes them itself, and is measured from itself.
+     */
+    layoutRoot = input(undefined, { ...(ngDevMode ? { debugName: "layoutRoot" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiViewHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiViewHost, isStandalone: true, selector: "ui-view-host", inputs: { matchContents: { classPropertyName: "matchContents", publicName: "matchContents", isSignal: true, isRequired: false, transformFunction: null }, layoutRoot: { classPropertyName: "layoutRoot", publicName: "layoutRoot", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "matchContents": "matchContents()", "expoInternalSizeFromChildren": "matchContents()", "layoutRoot": "layoutRoot()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiViewHost, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-view-host',
+                    template: '<ng-content />',
+                    host: {
+                        '[matchContents]': 'matchContents()',
+                        '[expoInternalSizeFromChildren]': 'matchContents()',
+                        '[layoutRoot]': 'layoutRoot()',
+                        '[modifiers]': 'modifiers()',
+                    },
+                }]
+        }], propDecorators: { matchContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchContents", required: false }] }], layoutRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "layoutRoot", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * A SwiftUI `contextMenu`: the menu a long press on its trigger opens, with the trigger lifted
+ * over the dimmed screen. iOS only.
+ *
+ * Its content is three slots: `<ui-slot name="trigger">` is what is always shown,
+ * `<ui-slot name="items">` holds the `ui-button`s, `ui-divider`s and `ui-section`s of the menu, and
+ * `<ui-slot name="preview">`, when there is one, is shown above the open menu in place of the
+ * trigger. All three are SwiftUI content, as everything inside a `ui-host` is.
+ */
+export class UiContextMenu {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiContextMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiContextMenu, isStandalone: true, selector: "ui-context-menu", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiContextMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-context-menu',
+                    template: '<ng-content />',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * A SwiftUI `Button`, as a menu item or on its own, or Compose's on Android, which draws `label` as
+ * text inside it. `systemImage` and `role` are SwiftUI's alone.
+ */
 export class UiButton {
+    nativeView = nativeView();
+    android = nativePlatform() === 'android';
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     /** An SF Symbol name. */
@@ -98,27 +177,43 @@ export class UiButton {
     ...(ngDevMode ? [undefined, { debugName: "systemImage" }] : /* istanbul ignore next */ []));
     role = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "role" }] : /* istanbul ignore next */ []));
+    /**
+     * In a home-screen widget's layout, what a tap on it records for the app: see
+     * `@ng-native/expo/widget`.
+     */
+    target = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     buttonPress = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiButton, isStandalone: true, selector: "ui-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonPress: "buttonPress" }, host: { properties: { "label": "label()", "systemImage": "systemImage()", "role": "role()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiButton, isStandalone: true, selector: "ui-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonPress: "buttonPress" }, host: { listeners: { "buttonPressed": "android && buttonPress.emit($event)" }, properties: { "label": "label()", "systemImage": "systemImage()", "role": "role()", "target": "target()", "modifiers": "modifiers()" } }, ngImport: i0, template: `@if (android && label()) {
+      <ui-text [text]="label()" />
+    }
+    <ng-content />`, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => UiText), selector: "ui-text", inputs: ["text", "modifiers"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-button',
-                    template: '<ng-content />',
+                    imports: [forwardRef(() => UiText)],
+                    template: `@if (android && label()) {
+      <ui-text [text]="label()" />
+    }
+    <ng-content />`,
                     host: {
+                        '(buttonPressed)': 'android && buttonPress.emit($event)',
                         '[label]': 'label()',
                         '[systemImage]': 'systemImage()',
                         '[role]': 'role()',
+                        '[target]': 'target()',
                         '[modifiers]': 'modifiers()',
                     },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], systemImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemImage", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], buttonPress: [{ type: i0.Output, args: ["buttonPress"] }] } });
-/** A SwiftUI `Divider`: a separator between groups of menu items. */
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], systemImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemImage", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], buttonPress: [{ type: i0.Output, args: ["buttonPress"] }] } });
+/** A SwiftUI `Divider`, or Compose's `HorizontalDivider`: a separator between groups of items. */
 export class UiDivider {
+    nativeView = nativeView();
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -138,19 +233,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * `allowsFullSwipe`.
  */
 export class UiSlot {
+    nativeView = nativeView();
+    android = nativePlatform() === 'android';
     name = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     extraProps = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "extraProps" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSlot, isStandalone: true, selector: "ui-slot", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, extraProps: { classPropertyName: "extraProps", publicName: "extraProps", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "name": "name()", "extraProps": "extraProps()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSlot, isStandalone: true, selector: "ui-slot", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, extraProps: { classPropertyName: "extraProps", publicName: "extraProps", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "name": "android ? undefined : name()", "slotName": "android ? name() : undefined", "extraProps": "extraProps()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSlot, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-slot',
                     template: '<ng-content />',
-                    host: { '[name]': 'name()', '[extraProps]': 'extraProps()' },
+                    host: {
+                        '[name]': 'android ? undefined : name()',
+                        '[slotName]': 'android ? name() : undefined',
+                        '[extraProps]': 'extraProps()',
+                    },
                 }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], extraProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraProps", required: false }] }] } });
 /**
@@ -158,6 +259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * swipe actions through `ui-swipe-actions`.
  */
 export class UiList {
+    nativeView = nativeView();
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiList, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -177,6 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * slot per edge, as `ui-button`s.
  */
 export class UiSwipeActions {
+    nativeView = nativeView();
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSwipeActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -191,10 +294,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                 }]
         }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /**
- * A SwiftUI `Slider`, iOS only. `valueChanged` reports each new value as the thumb moves; note the
- * d, which the native event has and `@expo/ui`'s React prop does not.
+ * A SwiftUI `Slider`, or Compose's on Android. `valueChanged` reports each new value as the thumb
+ * moves; note the d, which SwiftUI's event has and `@expo/ui`'s React prop does not.
  */
 export class UiSlider {
+    nativeView = nativeView();
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumber });
@@ -203,8 +307,29 @@ export class UiSlider {
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     valueChanged = output();
+    android = nativePlatform() === 'android';
+    /** A whole number of steps, which is all Compose can draw. */
+    wholeSteps = computed(() => {
+        const steps = Math.round(this.steps() ?? 0);
+        return steps > 0 ? steps : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wholeSteps" }] : /* istanbul ignore next */ []));
+    /** SwiftUI takes a step size, and draws 0 to 1 unless it has both ends. */
+    stepSize = computed(() => {
+        const steps = this.wholeSteps();
+        const min = this.min();
+        const max = this.max();
+        return steps && (min !== undefined && max !== undefined ? max - min : 1) / steps;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepSize" }] : /* istanbul ignore next */ []));
+    /** Compose takes the number of points between the ends. */
+    stepsBetween = computed(() => {
+        const steps = this.wholeSteps();
+        return steps && steps - 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepsBetween" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSlider, isStandalone: true, selector: "ui-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, host: { properties: { "value": "value()", "min": "min()", "max": "max()", "steps": "steps()", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSlider, isStandalone: true, selector: "ui-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanged: "valueChanged" }, host: { listeners: { "valueChange": "android && valueChanged.emit($event)" }, properties: { "value": "value()", "min": "min()", "max": "max()", "step": "android ? undefined : stepSize()", "steps": "android ? stepsBetween() : undefined", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSlider, decorators: [{
             type: Component,
@@ -215,20 +340,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                         '[value]': 'value()',
                         '[min]': 'min()',
                         '[max]': 'max()',
-                        '[steps]': 'steps()',
+                        '[step]': 'android ? undefined : stepSize()',
+                        '[steps]': 'android ? stepsBetween() : undefined',
                         '[modifiers]': 'modifiers()',
+                        '(valueChange)': 'android && valueChanged.emit($event)',
                     },
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], valueChanged: [{ type: i0.Output, args: ["valueChanged"] }] } });
-/** A SwiftUI `VStack`. */
+/**
+ * A SwiftUI `VStack`, or Compose's `Column` on Android, centred, as SwiftUI's is, unless `alignment`
+ * says otherwise. Without `spacing`, SwiftUI puts its own default spacing between children and Compose
+ * puts none.
+ */
 export class UiVStack {
+    nativeView = nativeView();
     alignment = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
     spacing = input(undefined, { ...(ngDevMode ? { debugName: "spacing" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    android = nativePlatform() === 'android';
+    spacedBy = spacedBy;
+    composeAlignment(alignment) {
+        return alignment === 'leading' ? 'start' : alignment === 'trailing' ? 'end' : 'center';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiVStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiVStack, isStandalone: true, selector: "ui-vstack", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "alignment": "alignment()", "spacing": "spacing()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiVStack, isStandalone: true, selector: "ui-vstack", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "alignment": "android ? undefined : alignment()", "spacing": "android ? undefined : spacing()", "verticalArrangement": "android ? spacedBy(spacing()) : undefined", "horizontalAlignment": "android ? composeAlignment(alignment()) : undefined", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiVStack, decorators: [{
             type: Component,
@@ -236,14 +373,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     selector: 'ui-vstack',
                     template: '<ng-content />',
                     host: {
-                        '[alignment]': 'alignment()',
-                        '[spacing]': 'spacing()',
+                        '[alignment]': 'android ? undefined : alignment()',
+                        '[spacing]': 'android ? undefined : spacing()',
+                        '[verticalArrangement]': 'android ? spacedBy(spacing()) : undefined',
+                        '[horizontalAlignment]': 'android ? composeAlignment(alignment()) : undefined',
                         '[modifiers]': 'modifiers()',
                     },
                 }]
         }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `Image`: an SF Symbol by `systemName`, or a picture by `uiImage` URL. */
 export class UiImage {
+    nativeView = nativeView();
     systemName = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "systemName" }] : /* istanbul ignore next */ []));
     uiImage = input(/* @ts-ignore */
@@ -270,20 +410,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     },
                 }]
         }], propDecorators: { systemName: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemName", required: false }] }], uiImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiImage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
-/** A SwiftUI `Text`. */
+/**
+ * A SwiftUI `Text`, or Compose's on Android. Its text is what is written inside it,
+ * `<ui-text>Us {{ score }}</ui-text>`, as `<text>` takes its own, or `text`, which wins over it.
+ */
 export class UiText {
+    nativeView = nativeView();
     text = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiText, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiText, isStandalone: true, selector: "ui-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "text": "text()", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiText, isStandalone: true, selector: "ui-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "text": "text()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-text',
-                    template: '',
+                    template: '<ng-content />',
                     host: { '[text]': 'text()', '[modifiers]': 'modifiers()' },
                 }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
@@ -298,6 +442,18 @@ function listen(event, handle) {
     const stop = engine.setEventListener(node, event, (raw) => handle(raw?.nativeEvent ?? {}));
     inject(DestroyRef).onDestroy(stop);
 }
+/**
+ * A Compose event as the SwiftUI one it stands in for: its payload renamed, and stopping it stops the
+ * event it came from.
+ */
+function withNativeEvent(event, nativeEvent) {
+    return {
+        nativeEvent,
+        target: event.target,
+        stopPropagation: () => event.stopPropagation(),
+        isPropagationStopped: () => event.isPropagationStopped(),
+    };
+}
 /** The caller's modifiers, with SwiftUI's `disabled` added while the field is. */
 function withDisabled(modifiers, disabled) {
     return disabled ? [...(modifiers ?? []), { $type: 'disabled', disabled: true }] : modifiers;
@@ -317,6 +473,7 @@ function withDisabled(modifiers, disabled) {
  * `selection` is still accepted as ISO text, for a picker bound without a form.
  */
 export class UiDatePicker {
+    nativeView = nativeView();
     title = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     selection = input(/* @ts-ignore */
@@ -391,6 +548,7 @@ const APPEARING_MS = 1000;
  * work for anything richer. `pickerStyle` is SwiftUI's (`menu`, `segmented`, `wheel`, `inline`).
  */
 export class UiPicker {
+    nativeView = nativeView();
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     /** An SF Symbol name. */
@@ -466,27 +624,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], systemImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemImage", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], pickerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerStyle", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
-/** A SwiftUI `Toggle`. `isOnChange` reports each flip. */
+/**
+ * A SwiftUI `Toggle`, or Compose's `Switch` on Android. `isOnChange` reports each flip. Bound to
+ * `isOn`, it shows what `isOn` says; without it, it switches itself. `label` is SwiftUI's alone.
+ */
 export class UiToggle {
+    nativeView = nativeView();
     isOn = input(undefined, { ...(ngDevMode ? { debugName: "isOn" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     isOnChange = output();
+    android = nativePlatform() === 'android';
+    /** What Compose's switch shows without `isOn`: SwiftUI's keeps this itself, Compose's does not. */
+    switchedOn = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "switchedOn" }] : /* istanbul ignore next */ []));
+    checked(event) {
+        this.switchedOn.set(event.nativeEvent.value);
+        this.isOnChange.emit(withNativeEvent(event, { isOn: event.nativeEvent.value }));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiToggle, isStandalone: true, selector: "ui-toggle", inputs: { isOn: { classPropertyName: "isOn", publicName: "isOn", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOnChange: "isOnChange" }, host: { properties: { "isOn": "isOn()", "label": "label()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiToggle, isStandalone: true, selector: "ui-toggle", inputs: { isOn: { classPropertyName: "isOn", publicName: "isOn", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOnChange: "isOnChange" }, host: { listeners: { "checkedChange": "android && checked($event)" }, properties: { "isOn": "android ? undefined : isOn()", "value": "android ? (isOn() ?? switchedOn()) : undefined", "label": "label()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiToggle, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-toggle',
                     template: '<ng-content />',
-                    host: { '[isOn]': 'isOn()', '[label]': 'label()', '[modifiers]': 'modifiers()' },
+                    host: {
+                        '[isOn]': 'android ? undefined : isOn()',
+                        '[value]': 'android ? (isOn() ?? switchedOn()) : undefined',
+                        '[label]': 'label()',
+                        '[modifiers]': 'modifiers()',
+                        '(checkedChange)': 'android && checked($event)',
+                    },
                 }]
         }], propDecorators: { isOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOn", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], isOnChange: [{ type: i0.Output, args: ["isOnChange"] }] } });
 /** A SwiftUI `Stepper`, between `min` and `max` by `step`. */
 export class UiStepper {
+    nativeView = nativeView();
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumber });
@@ -519,6 +696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * writes to it on the UI thread, and `textChange` reports each change.
  */
 export class UiTextField {
+    nativeView = nativeView();
     text = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
     placeholder = input(/* @ts-ignore */
@@ -543,6 +721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], textChange: [{ type: i0.Output, args: ["textChange"] }] } });
 /** A SwiftUI `ColorPicker`. `selection` is a colour as hex. */
 export class UiColorPicker {
+    nativeView = nativeView();
     selection = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "selection" }] : /* istanbul ignore next */ []));
     label = input(/* @ts-ignore */
@@ -569,6 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], supportsOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportsOpacity", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 /** A SwiftUI `Gauge`: `value` between `min` and `max`, drawn as `type` says. */
 export class UiGauge {
+    nativeView = nativeView();
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: optionalNumber });
@@ -602,31 +782,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     },
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], currentValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentValueLabel", required: false }] }], minimumValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimumValueLabel", required: false }] }], maximumValueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximumValueLabel", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
-/** A SwiftUI `ProgressView`: a bar filled to `value`, from 0 to 1, or a spinner without one. */
+/**
+ * A Swift Charts chart of `data`, drawn as `type` says, iOS only, as Compose has no chart. Each
+ * style applies to its own type alone; `referenceLines` are drawn across it in `ruleStyle`.
+ * `showLegend` shows only when no point has a colour of its own.
+ */
+export class UiChart {
+    nativeView = nativeView();
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    type = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
+    showGrid = input(undefined, { ...(ngDevMode ? { debugName: "showGrid" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    animate = input(undefined, { ...(ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    showLegend = input(undefined, { ...(ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    referenceLines = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "referenceLines" }] : /* istanbul ignore next */ []));
+    lineStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "lineStyle" }] : /* istanbul ignore next */ []));
+    pointStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pointStyle" }] : /* istanbul ignore next */ []));
+    areaStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "areaStyle" }] : /* istanbul ignore next */ []));
+    barStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "barStyle" }] : /* istanbul ignore next */ []));
+    pieStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "pieStyle" }] : /* istanbul ignore next */ []));
+    rectangleStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rectangleStyle" }] : /* istanbul ignore next */ []));
+    ruleStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ruleStyle" }] : /* istanbul ignore next */ []));
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiChart, isStandalone: true, selector: "ui-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, referenceLines: { classPropertyName: "referenceLines", publicName: "referenceLines", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, pointStyle: { classPropertyName: "pointStyle", publicName: "pointStyle", isSignal: true, isRequired: false, transformFunction: null }, areaStyle: { classPropertyName: "areaStyle", publicName: "areaStyle", isSignal: true, isRequired: false, transformFunction: null }, barStyle: { classPropertyName: "barStyle", publicName: "barStyle", isSignal: true, isRequired: false, transformFunction: null }, pieStyle: { classPropertyName: "pieStyle", publicName: "pieStyle", isSignal: true, isRequired: false, transformFunction: null }, rectangleStyle: { classPropertyName: "rectangleStyle", publicName: "rectangleStyle", isSignal: true, isRequired: false, transformFunction: null }, ruleStyle: { classPropertyName: "ruleStyle", publicName: "ruleStyle", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "data": "data()", "type": "type()", "showGrid": "showGrid()", "animate": "animate()", "showLegend": "showLegend()", "referenceLines": "referenceLines()", "lineStyle": "lineStyle()", "pointStyle": "pointStyle()", "areaStyle": "areaStyle()", "barStyle": "barStyle()", "pieStyle": "pieStyle()", "rectangleStyle": "rectangleStyle()", "ruleStyle": "ruleStyle()", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-chart',
+                    template: '',
+                    host: {
+                        '[data]': 'data()',
+                        '[type]': 'type()',
+                        '[showGrid]': 'showGrid()',
+                        '[animate]': 'animate()',
+                        '[showLegend]': 'showLegend()',
+                        '[referenceLines]': 'referenceLines()',
+                        '[lineStyle]': 'lineStyle()',
+                        '[pointStyle]': 'pointStyle()',
+                        '[areaStyle]': 'areaStyle()',
+                        '[barStyle]': 'barStyle()',
+                        '[pieStyle]': 'pieStyle()',
+                        '[rectangleStyle]': 'rectangleStyle()',
+                        '[ruleStyle]': 'ruleStyle()',
+                        '[modifiers]': 'modifiers()',
+                    },
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], referenceLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "referenceLines", required: false }] }], lineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "lineStyle", required: false }] }], pointStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pointStyle", required: false }] }], areaStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaStyle", required: false }] }], barStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "barStyle", required: false }] }], pieStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "pieStyle", required: false }] }], rectangleStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "rectangleStyle", required: false }] }], ruleStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "ruleStyle", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * A SwiftUI `ProgressView`: a bar filled to `value`, from 0 to 1, or a spinner without one. On
+ * Android, Compose's `LinearProgressIndicator`, a moving bar rather than a spinner without a value.
+ */
 export class UiProgress {
+    nativeView = nativeView();
+    android = nativePlatform() === 'android';
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiProgress, isStandalone: true, selector: "ui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "value": "value()", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiProgress, isStandalone: true, selector: "ui-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "value": "android ? undefined : value()", "progress": "android ? value() : undefined", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiProgress, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-progress',
                     template: '',
-                    host: { '[value]': 'value()', '[modifiers]': 'modifiers()' },
+                    host: {
+                        '[value]': 'android ? undefined : value()',
+                        '[progress]': 'android ? value() : undefined',
+                        '[modifiers]': 'modifiers()',
+                    },
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
-/** A SwiftUI `HStack`. */
+/**
+ * A SwiftUI `HStack`, or Compose's `Row` on Android, centred, as SwiftUI's is, unless `alignment`
+ * says otherwise. Compose has no `firstTextBaseline`, and centres instead. Without `spacing`, SwiftUI
+ * puts its own default spacing between children and Compose puts none.
+ */
 export class UiHStack {
+    nativeView = nativeView();
     alignment = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
     spacing = input(undefined, { ...(ngDevMode ? { debugName: "spacing" } : /* istanbul ignore next */ {}), transform: optionalNumber });
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    android = nativePlatform() === 'android';
+    spacedBy = spacedBy;
+    composeAlignment(alignment) {
+        return alignment === 'top' || alignment === 'bottom' ? alignment : 'center';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiHStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiHStack, isStandalone: true, selector: "ui-hstack", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "alignment": "alignment()", "spacing": "spacing()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiHStack, isStandalone: true, selector: "ui-hstack", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "alignment": "android ? undefined : alignment()", "spacing": "android ? undefined : spacing()", "horizontalArrangement": "android ? spacedBy(spacing()) : undefined", "verticalAlignment": "android ? composeAlignment(alignment()) : undefined", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiHStack, decorators: [{
             type: Component,
@@ -634,14 +891,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     selector: 'ui-hstack',
                     template: '<ng-content />',
                     host: {
-                        '[alignment]': 'alignment()',
-                        '[spacing]': 'spacing()',
+                        '[alignment]': 'android ? undefined : alignment()',
+                        '[spacing]': 'android ? undefined : spacing()',
+                        '[horizontalArrangement]': 'android ? spacedBy(spacing()) : undefined',
+                        '[verticalAlignment]': 'android ? composeAlignment(alignment()) : undefined',
                         '[modifiers]': 'modifiers()',
                     },
                 }]
         }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+function spacedBy(spacing) {
+    return spacing === undefined ? undefined : { spacedBy: Math.round(spacing) };
+}
 /** A SwiftUI `Spacer`: the room left over in its stack. */
 export class UiSpacer {
+    nativeView = nativeView();
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSpacer, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -655,25 +918,250 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     host: { '[modifiers]': 'modifiers()' },
                 }]
         }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** The same place, as Compose's `Box` names it. */
+const CONTENT_ALIGNMENT = {
+    center: 'center',
+    leading: 'centerStart',
+    trailing: 'centerEnd',
+    top: 'topCenter',
+    bottom: 'bottomCenter',
+    topLeading: 'topStart',
+    topTrailing: 'topEnd',
+    bottomLeading: 'bottomStart',
+    bottomTrailing: 'bottomEnd',
+};
+/**
+ * A SwiftUI `ZStack`: its children drawn over one another, the first at the back. On Android,
+ * Compose's `Box`, centred, as SwiftUI's is, unless `alignment` says otherwise.
+ */
+export class UiZStack {
+    nativeView = nativeView();
+    alignment = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    android = nativePlatform() === 'android';
+    contentAlignment = CONTENT_ALIGNMENT;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiZStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiZStack, isStandalone: true, selector: "ui-zstack", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "alignment": "android ? undefined : alignment()", "contentAlignment": "android ? contentAlignment[alignment() ?? \"center\"] : undefined", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiZStack, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-zstack',
+                    template: '<ng-content />',
+                    host: {
+                        '[alignment]': 'android ? undefined : alignment()',
+                        '[contentAlignment]': 'android ? contentAlignment[alignment() ?? "center"] : undefined',
+                        '[modifiers]': 'modifiers()',
+                    },
+                }]
+        }], propDecorators: { alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** A SwiftUI `Rectangle`, filling the space it is given. Colour it with `foregroundStyle`. */
+export class UiRectangle {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiRectangle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiRectangle, isStandalone: true, selector: "ui-rectangle", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiRectangle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-rectangle',
+                    template: '',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** A SwiftUI `RoundedRectangle`, its corners rounded by `cornerRadius`. */
+export class UiRoundedRectangle {
+    nativeView = nativeView();
+    cornerRadius = input(undefined, { ...(ngDevMode ? { debugName: "cornerRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiRoundedRectangle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiRoundedRectangle, isStandalone: true, selector: "ui-rounded-rectangle", inputs: { cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "cornerRadius": "cornerRadius()", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiRoundedRectangle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-rounded-rectangle',
+                    template: '',
+                    host: { '[cornerRadius]': 'cornerRadius()', '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** A SwiftUI `UnevenRoundedRectangle`: a rectangle with a radius of its own for each corner. */
+export class UiUnevenRoundedRectangle {
+    nativeView = nativeView();
+    topLeadingRadius = input(undefined, { ...(ngDevMode ? { debugName: "topLeadingRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    topTrailingRadius = input(undefined, { ...(ngDevMode ? { debugName: "topTrailingRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    bottomLeadingRadius = input(undefined, { ...(ngDevMode ? { debugName: "bottomLeadingRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    bottomTrailingRadius = input(undefined, { ...(ngDevMode ? { debugName: "bottomTrailingRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiUnevenRoundedRectangle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiUnevenRoundedRectangle, isStandalone: true, selector: "ui-uneven-rounded-rectangle", inputs: { topLeadingRadius: { classPropertyName: "topLeadingRadius", publicName: "topLeadingRadius", isSignal: true, isRequired: false, transformFunction: null }, topTrailingRadius: { classPropertyName: "topTrailingRadius", publicName: "topTrailingRadius", isSignal: true, isRequired: false, transformFunction: null }, bottomLeadingRadius: { classPropertyName: "bottomLeadingRadius", publicName: "bottomLeadingRadius", isSignal: true, isRequired: false, transformFunction: null }, bottomTrailingRadius: { classPropertyName: "bottomTrailingRadius", publicName: "bottomTrailingRadius", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "topLeadingRadius": "topLeadingRadius()", "topTrailingRadius": "topTrailingRadius()", "bottomLeadingRadius": "bottomLeadingRadius()", "bottomTrailingRadius": "bottomTrailingRadius()", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiUnevenRoundedRectangle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-uneven-rounded-rectangle',
+                    template: '',
+                    host: {
+                        '[topLeadingRadius]': 'topLeadingRadius()',
+                        '[topTrailingRadius]': 'topTrailingRadius()',
+                        '[bottomLeadingRadius]': 'bottomLeadingRadius()',
+                        '[bottomTrailingRadius]': 'bottomTrailingRadius()',
+                        '[modifiers]': 'modifiers()',
+                    },
+                }]
+        }], propDecorators: { topLeadingRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "topLeadingRadius", required: false }] }], topTrailingRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "topTrailingRadius", required: false }] }], bottomLeadingRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomLeadingRadius", required: false }] }], bottomTrailingRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomTrailingRadius", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** A SwiftUI `Capsule`: a rectangle with fully rounded ends. */
+export class UiCapsule {
+    nativeView = nativeView();
+    cornerStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cornerStyle" }] : /* istanbul ignore next */ []));
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiCapsule, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiCapsule, isStandalone: true, selector: "ui-capsule", inputs: { cornerStyle: { classPropertyName: "cornerStyle", publicName: "cornerStyle", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "cornerStyle": "cornerStyle()", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiCapsule, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-capsule',
+                    template: '',
+                    host: { '[cornerStyle]': 'cornerStyle()', '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { cornerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerStyle", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** A SwiftUI `Circle`, as large as fits the space it is given. */
+export class UiCircle {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiCircle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiCircle, isStandalone: true, selector: "ui-circle", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiCircle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-circle',
+                    template: '',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** A SwiftUI `Ellipse`, filling the space it is given. */
+export class UiEllipse {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiEllipse, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiEllipse, isStandalone: true, selector: "ui-ellipse", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiEllipse, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-ellipse',
+                    template: '',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * WidgetKit's `AccessoryWidgetBackground`: the system's backdrop for a lock screen widget, the
+ * translucent disc or panel behind its content.
+ */
+export class UiAccessoryWidgetBackground {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiAccessoryWidgetBackground, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiAccessoryWidgetBackground, isStandalone: true, selector: "ui-accessory-widget-background", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiAccessoryWidgetBackground, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-accessory-widget-background',
+                    template: '',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** A SwiftUI `Label`: a title beside an SF Symbol. */
+export class UiLabel {
+    nativeView = nativeView();
+    title = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    /** An SF Symbol name. */
+    systemImage = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "systemImage" }] : /* istanbul ignore next */ []));
+    color = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiLabel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiLabel, isStandalone: true, selector: "ui-label", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "title": "title()", "systemImage": "systemImage()", "color": "color()", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiLabel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-label',
+                    template: '',
+                    host: {
+                        '[title]': 'title()',
+                        '[systemImage]': 'systemImage()',
+                        '[color]': 'color()',
+                        '[modifiers]': 'modifiers()',
+                    },
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], systemImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemImage", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/**
+ * A SwiftUI `Link`: opens `destination`, a URL, when tapped. It shows `label`, or the views
+ * written inside it. In a widget, a link is how a tap opens the app at a deep link.
+ */
+export class UiLink {
+    nativeView = nativeView();
+    destination = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "destination" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiLink, isStandalone: true, selector: "ui-link", inputs: { destination: { classPropertyName: "destination", publicName: "destination", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "destination": "destination()", "label": "label()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiLink, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-link',
+                    template: '<ng-content />',
+                    host: {
+                        '[destination]': 'destination()',
+                        '[label]': 'label()',
+                        '[modifiers]': 'modifiers()',
+                    },
+                }]
+        }], propDecorators: { destination: [{ type: i0.Input, args: [{ isSignal: true, alias: "destination", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `LabeledContent`: a label, and its content beside it. */
 export class UiLabeledContent {
+    nativeView = nativeView();
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiLabeledContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiLabeledContent, isStandalone: true, selector: "ui-labeled-content", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "label": "label()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiLabeledContent, isStandalone: true, selector: "ui-labeled-content", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "label": "label()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ui-slot name="content"><ng-content /></ui-slot>', isInline: true, dependencies: [{ kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiLabeledContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-labeled-content',
-                    template: '<ng-content />',
+                    imports: [UiSlot],
+                    template: '<ui-slot name="content"><ng-content /></ui-slot>',
                     host: { '[label]': 'label()', '[modifiers]': 'modifiers()' },
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `Form`: settings-style grouped rows. */
 export class UiForm {
+    nativeView = nativeView();
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -689,18 +1177,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
 /** A SwiftUI `Section` of a form or a list, under `title`. */
 export class UiSection {
+    nativeView = nativeView();
     title = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSection, isStandalone: true, selector: "ui-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "title": "title()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSection, isStandalone: true, selector: "ui-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "title": "title()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ui-slot name="content"><ng-content /></ui-slot>', isInline: true, dependencies: [{ kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSection, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-section',
-                    template: '<ng-content />',
+                    imports: [UiSlot],
+                    template: '<ui-slot name="content"><ng-content /></ui-slot>',
                     host: { '[title]': 'title()', '[modifiers]': 'modifiers()' },
                 }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });