@ng-native/expo 0.2.0 → 0.3.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,19 +7,23 @@
  * 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 { Component, DestroyRef, forwardRef, ElementRef, booleanAttribute, computed, inject, input, model, output, signal, } from '@angular/core';
 import { HostEngine, nativePlatform, } from '@ng-native/fabric';
 import { optionalBoolean, optionalNumber } from "./transforms.js";
 import * as i0 from "@angular/core";
@@ -89,8 +93,12 @@ 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. */
+/**
+ * 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 {
+    android = nativePlatform() === 'android';
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     /** An SF Symbol name. */
@@ -102,14 +110,22 @@ export class UiButton {
     ...(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 }, 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()", "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()',
@@ -117,7 +133,7 @@ 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 }] }], 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. */
+/** A SwiftUI `Divider`, or Compose's `HorizontalDivider`: a separator between groups of items. */
 export class UiDivider {
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
@@ -138,19 +154,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * `allowsFullSwipe`.
  */
 export class UiSlot {
+    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 }] }] } });
 /**
@@ -191,8 +212,8 @@ 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 {
     value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), transform: optionalNumber });
@@ -203,8 +224,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 +257,31 @@ 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 {
     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,8 +289,10 @@ 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()',
                     },
                 }]
@@ -270,20 +325,23 @@ 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 {
     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 +356,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;
@@ -466,7 +536,10 @@ 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 {
     isOn = input(undefined, { ...(ngDevMode ? { debugName: "isOn" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
     label = input(/* @ts-ignore */
@@ -474,15 +547,29 @@ export class UiToggle {
     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`. */
@@ -602,31 +689,48 @@ 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 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 {
+    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 {
     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,12 +738,17 @@ 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 {
     modifiers = input(/* @ts-ignore */
@@ -655,6 +764,218 @@ 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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
     label = input(/* @ts-ignore */
@@ -662,13 +983,14 @@ export class UiLabeledContent {
     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 }] }] } });
@@ -694,13 +1016,14 @@ export class UiSection {
     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 }] }] } });