@ng-native/expo 0.15.0 → 0.17.0

package/dist/expo-ui-components.js

@@ -47,6 +47,7 @@ function nativeView() {
  */
 export class UiHost {
     nativeView = nativeView();
+    android = nativePlatform() === 'android';
     matchContents = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "matchContents" }] : /* istanbul ignore next */ []));
     matchVertical = computed(() => {
@@ -59,11 +60,12 @@ export class UiHost {
         return typeof match === 'object' ? match.horizontal : match;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "matchHorizontal" }] : /* istanbul ignore next */ []));
+    /** The safe area SwiftUI's host ignores, iOS only: Compose's host has no such prop. */
     ignoreSafeArea = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "ignoreSafeArea" }] : /* istanbul ignore next */ []));
     useViewportSizeMeasurement = input(undefined, { ...(ngDevMode ? { debugName: "useViewportSizeMeasurement" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiHost, isStandalone: true, selector: "ui-host", inputs: { matchContents: { classPropertyName: "matchContents", publicName: "matchContents", isSignal: true, isRequired: false, transformFunction: null }, ignoreSafeArea: { classPropertyName: "ignoreSafeArea", publicName: "ignoreSafeArea", isSignal: true, isRequired: false, transformFunction: null }, useViewportSizeMeasurement: { classPropertyName: "useViewportSizeMeasurement", publicName: "useViewportSizeMeasurement", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "matchContentsVertical": "matchVertical()", "matchContentsHorizontal": "matchHorizontal()", "ignoreSafeArea": "ignoreSafeArea()", "useViewportSizeMeasurement": "useViewportSizeMeasurement()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiHost, isStandalone: true, selector: "ui-host", inputs: { matchContents: { classPropertyName: "matchContents", publicName: "matchContents", isSignal: true, isRequired: false, transformFunction: null }, ignoreSafeArea: { classPropertyName: "ignoreSafeArea", publicName: "ignoreSafeArea", isSignal: true, isRequired: false, transformFunction: null }, useViewportSizeMeasurement: { classPropertyName: "useViewportSizeMeasurement", publicName: "useViewportSizeMeasurement", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "matchContentsVertical": "matchVertical()", "matchContentsHorizontal": "matchHorizontal()", "ignoreSafeArea": "android ? undefined : ignoreSafeArea()", "useViewportSizeMeasurement": "useViewportSizeMeasurement()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiHost, decorators: [{
             type: Component,
@@ -73,7 +75,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     host: {
                         '[matchContentsVertical]': 'matchVertical()',
                         '[matchContentsHorizontal]': 'matchHorizontal()',
-                        '[ignoreSafeArea]': 'ignoreSafeArea()',
+                        '[ignoreSafeArea]': 'android ? undefined : ignoreSafeArea()',
                         '[useViewportSizeMeasurement]': 'useViewportSizeMeasurement()',
                     },
                 }]
@@ -81,17 +83,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
 /** A SwiftUI `Menu`. Its trigger is the `label` or a `<ui-slot name="label">`; its items are children. */
 export class UiMenu {
     nativeView = nativeView();
+    android = nativePlatform() === 'android';
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
     /** An SF Symbol name. */
     systemImage = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "systemImage" }] : /* istanbul ignore next */ []));
+    /** What VoiceOver reads for the menu's trigger: SwiftUI's `accessibilityLabel` modifier. */
     accessibilityLabel = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "accessibilityLabel" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    resolvedModifiers = computed(() => withModifiers(this.modifiers(), spokenLabel(this.accessibilityLabel())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedModifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiMenu, isStandalone: true, selector: "ui-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "label": "label()", "systemImage": "systemImage()", "accessibilityLabel": "accessibilityLabel()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiMenu, isStandalone: true, selector: "ui-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "label": "android ? undefined : label()", "systemImage": "android ? undefined : systemImage()", "modifiers": "android ? modifiers() : resolvedModifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiMenu, decorators: [{
             type: Component,
@@ -99,10 +105,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     selector: 'ui-menu',
                     template: '<ng-content />',
                     host: {
-                        '[label]': 'label()',
-                        '[systemImage]': 'systemImage()',
-                        '[accessibilityLabel]': 'accessibilityLabel()',
-                        '[modifiers]': 'modifiers()',
+                        '[label]': 'android ? undefined : label()',
+                        '[systemImage]': 'android ? undefined : systemImage()',
+                        '[modifiers]': 'android ? modifiers() : resolvedModifiers()',
                     },
                 }]
         }], 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 }] }] } });
@@ -117,6 +122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  * and no height.
  */
 export class UiViewHost {
+    android = nativePlatform() === 'android';
     nativeView = nativeView();
     matchContents = input(undefined, { ...(ngDevMode ? { debugName: "matchContents" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
     /**
@@ -124,10 +130,11 @@ export class UiViewHost {
      * delivers its touches: it then takes them itself, and is measured from itself.
      */
     layoutRoot = input(undefined, { ...(ngDevMode ? { debugName: "layoutRoot" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** Compose's modifiers for the view host, Android only: SwiftUI's view host takes none. */
     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 });
+    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()", "matchContentsHorizontal": "matchContents()", "matchContentsVertical": "matchContents()", "expoInternalSizeFromChildren": "matchContents()", "layoutRoot": "layoutRoot()", "modifiers": "android ? modifiers() : undefined" } }, ngImport: i0, template: '<ng-content />', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiViewHost, decorators: [{
             type: Component,
@@ -135,10 +142,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     selector: 'ui-view-host',
                     template: '<ng-content />',
                     host: {
+                        // `@expo/ui` to 57.0.22 reads `matchContents`, and from 57.0.23 one prop for each axis.
                         '[matchContents]': 'matchContents()',
+                        '[matchContentsHorizontal]': 'matchContents()',
+                        '[matchContentsVertical]': 'matchContents()',
                         '[expoInternalSizeFromChildren]': 'matchContents()',
                         '[layoutRoot]': 'layoutRoot()',
-                        '[modifiers]': 'modifiers()',
+                        // SwiftUI's view host takes no modifiers; Compose's does.
+                        '[modifiers]': 'android ? modifiers() : undefined',
                     },
                 }]
         }], 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 }] }] } });
@@ -183,7 +194,8 @@ export class UiButton {
     ...(ngDevMode ? [undefined, { debugName: "role" }] : /* istanbul ignore next */ []));
     /**
      * In a home-screen widget's or a Live Activity's layout, what a tap on it hands the app: see
-     * `@ng-native/expo/widget` and `@ng-native/expo/live-activity`.
+     * `@ng-native/expo/widget` and `@ng-native/expo/live-activity`. The layout's build reads it, so
+     * an app's own button is not sent it: `@expo/ui`'s button there has no target.
      */
     target = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "target" }] : /* istanbul ignore next */ []));
@@ -191,7 +203,7 @@ 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.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()) {
+    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": "android ? undefined : label()", "systemImage": "android ? undefined : systemImage()", "role": "android ? undefined : 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", "date", "dateStyle", "timerInterval", "countsDown", "modifiers"] }] });
@@ -207,10 +219,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
     <ng-content />`,
                     host: {
                         '(buttonPressed)': 'android && buttonPress.emit($event)',
-                        '[label]': 'label()',
-                        '[systemImage]': 'systemImage()',
-                        '[role]': 'role()',
-                        '[target]': 'target()',
+                        '[label]': 'android ? undefined : label()',
+                        '[systemImage]': 'android ? undefined : systemImage()',
+                        '[role]': 'android ? undefined : role()',
                         '[modifiers]': 'modifiers()',
                     },
                 }]
@@ -241,10 +252,11 @@ export class UiSlot {
     android = nativePlatform() === 'android';
     name = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** What the slot tells its SwiftUI parent about itself, iOS only. */
     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": "android ? undefined : name()", "slotName": "android ? name() : undefined", "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": "android ? undefined : 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,
@@ -254,7 +266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     host: {
                         '[name]': 'android ? undefined : name()',
                         '[slotName]': 'android ? name() : undefined',
-                        '[extraProps]': 'extraProps()',
+                        '[extraProps]': 'android ? undefined : extraProps()',
                     },
                 }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], extraProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraProps", required: false }] }] } });
@@ -391,19 +403,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  */
 export class UiImage {
     nativeView = nativeView();
+    /** Compose's image is another control, which takes a `source`: none of these are its. */
+    android = nativePlatform() === 'android';
     systemName = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "systemName" }] : /* istanbul ignore next */ []));
     assetName = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "assetName" }] : /* istanbul ignore next */ []));
     uiImage = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "uiImage" }] : /* istanbul ignore next */ []));
+    /**
+     * A symbol's size in points, as a `font` modifier of that size, which does not scale with
+     * Dynamic Type. A `font` modifier in `modifiers` wins over it. Without either, the symbol is
+     * SwiftUI's default size, where `@expo/ui`'s own `Image` and a widget layout draw it at 24.
+     */
     size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    /** A symbol's colour, as a `foregroundStyle` modifier. */
     color = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    /** SwiftUI's image reads neither `size` nor `color`: `@expo/ui`'s `Image` makes them modifiers. */
+    resolvedModifiers = computed(() => {
+        const modifiers = this.modifiers();
+        const size = this.size();
+        const hasFont = modifiers?.some((modifier) => modifier.$type === 'font');
+        return withModifiers(modifiers, size !== undefined && !hasFont && { $type: 'font', size }, foregroundColor(this.color()));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedModifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiImage, isStandalone: true, selector: "ui-image", inputs: { systemName: { classPropertyName: "systemName", publicName: "systemName", isSignal: true, isRequired: false, transformFunction: null }, assetName: { classPropertyName: "assetName", publicName: "assetName", isSignal: true, isRequired: false, transformFunction: null }, uiImage: { classPropertyName: "uiImage", publicName: "uiImage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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: { "systemName": "systemName()", "assetName": "assetName()", "uiImage": "uiImage()", "size": "size()", "color": "color()", "modifiers": "modifiers()" } }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiImage, isStandalone: true, selector: "ui-image", inputs: { systemName: { classPropertyName: "systemName", publicName: "systemName", isSignal: true, isRequired: false, transformFunction: null }, assetName: { classPropertyName: "assetName", publicName: "assetName", isSignal: true, isRequired: false, transformFunction: null }, uiImage: { classPropertyName: "uiImage", publicName: "uiImage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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: { "systemName": "android ? undefined : systemName()", "assetName": "android ? undefined : assetName()", "uiImage": "android ? undefined : uiImage()", "modifiers": "android ? modifiers() : resolvedModifiers()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiImage, decorators: [{
             type: Component,
@@ -411,12 +439,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     selector: 'ui-image',
                     template: '',
                     host: {
-                        '[systemName]': 'systemName()',
-                        '[assetName]': 'assetName()',
-                        '[uiImage]': 'uiImage()',
-                        '[size]': 'size()',
-                        '[color]': 'color()',
-                        '[modifiers]': 'modifiers()',
+                        '[systemName]': 'android ? undefined : systemName()',
+                        '[assetName]': 'android ? undefined : assetName()',
+                        '[uiImage]': 'android ? undefined : uiImage()',
+                        '[modifiers]': 'android ? modifiers() : resolvedModifiers()',
                     },
                 }]
         }], propDecorators: { systemName: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemName", required: false }] }], assetName: [{ type: i0.Input, args: [{ isSignal: true, alias: "assetName", 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 }] }] } });
@@ -477,7 +503,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
  */
 function listen(event, handle) {
     const node = inject(ElementRef).nativeElement;
-    const engine = node.host ?? inject(HostEngine);
+    const engine = node.engine ?? inject(HostEngine);
     const stop = engine.setEventListener(node, event, (raw) => handle(raw?.nativeEvent ?? {}));
     inject(DestroyRef).onDestroy(stop);
 }
@@ -493,6 +519,31 @@ function withNativeEvent(event, nativeEvent) {
         isPropagationStopped: () => event.isPropagationStopped(),
     };
 }
+/**
+ * The caller's modifiers, with each modifier given added after them: what `@expo/ui`'s own
+ * components do with an input their native view reads as a modifier rather than as a prop.
+ */
+function withModifiers(modifiers, ...added) {
+    const given = added.filter((modifier) => !!modifier);
+    return given.length ? [...(modifiers ?? []), ...given] : modifiers;
+}
+/**
+ * SwiftUI's `foregroundStyle` modifier in one colour, as `@expo/ui`'s `foregroundStyle(color)`.
+ * `@expo/ui` to 57.0.14 reads `styleType` and `color`, and from 57.0.15 a `style`: this sends both.
+ */
+function foregroundColor(color) {
+    return color === undefined
+        ? undefined
+        : { $type: 'foregroundStyle', style: { type: 'color', color }, styleType: 'color', color };
+}
+/** SwiftUI's `accessibilityLabel` modifier, what VoiceOver reads for the view. */
+function spokenLabel(label) {
+    return label === undefined ? undefined : { $type: 'accessibilityLabel', label };
+}
+/** Compose's `semantics` modifier with a `contentDescription`, what TalkBack reads for the view. */
+function contentDescription(label) {
+    return label === undefined ? undefined : { $type: 'semantics', contentDescription: label };
+}
 /** 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;
@@ -537,7 +588,7 @@ export class UiDatePicker {
     touch = output();
     dateChange = output();
     android = nativePlatform() === 'android';
-    resolvedSelection = computed(() => this.android ? undefined : (this.selection() ?? this.value()?.toISOString()), /* @ts-ignore */
+    resolvedSelection = computed(() => this.selection() ?? this.value()?.toISOString(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedSelection" }] : /* istanbul ignore next */ []));
     /** SwiftUI takes a list of what to show, and Compose one word for it. */
     resolvedComponents = computed(() => {
@@ -547,9 +598,21 @@ export class UiDatePicker {
         return shown.length === 1 ? shown[0] : 'dateAndTime';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedComponents" }] : /* istanbul ignore next */ []));
-    initialDate = computed(() => this.android ? (this.value()?.getTime() ?? null) : undefined, /* @ts-ignore */
+    initialDate = computed(() => this.value()?.getTime() ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "initialDate" }] : /* istanbul ignore next */ []));
-    resolvedModifiers = computed(() => this.android ? this.modifiers() : withDisabled(this.modifiers(), this.disabled()), /* @ts-ignore */
+    /** Compose takes `range` as `selectableDates`, each end in milliseconds. */
+    selectableDates = computed(() => {
+        const range = this.range();
+        return (range && { start: milliseconds(range.start) ?? null, end: milliseconds(range.end) ?? null });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectableDates" }] : /* istanbul ignore next */ []));
+    /**
+     * SwiftUI's picker reads `disabled` and `accessibilityLabel` as modifiers, and Compose's reads
+     * `accessibilityLabel` as the `semantics` modifier's `contentDescription`.
+     */
+    resolvedModifiers = computed(() => this.android
+        ? withModifiers(this.modifiers(), contentDescription(this.accessibilityLabel()))
+        : withModifiers(withDisabled(this.modifiers(), this.disabled()), spokenLabel(this.accessibilityLabel())), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedModifiers" }] : /* istanbul ignore next */ []));
     /**
      * SwiftUI's picker cannot be empty: it shows today, and reports that as a change the moment it
@@ -572,7 +635,7 @@ export class UiDatePicker {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiDatePicker, isStandalone: true, selector: "ui-date-picker", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, displayedComponents: { classPropertyName: "displayedComponents", publicName: "displayedComponents", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", dateChange: "dateChange" }, host: { properties: { "title": "title()", "selection": "resolvedSelection()", "initialDate": "initialDate()", "displayedComponents": "resolvedComponents()", "range": "range()", "accessibilityLabel": "accessibilityLabel()", "modifiers": "resolvedModifiers()" } }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiDatePicker, isStandalone: true, selector: "ui-date-picker", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, displayedComponents: { classPropertyName: "displayedComponents", publicName: "displayedComponents", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", dateChange: "dateChange" }, host: { properties: { "title": "android ? undefined : title()", "selection": "android ? undefined : resolvedSelection()", "initialDate": "android ? initialDate() : undefined", "displayedComponents": "resolvedComponents()", "range": "android ? undefined : range()", "selectableDates": "android ? selectableDates() : undefined", "modifiers": "resolvedModifiers()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiDatePicker, decorators: [{
             type: Component,
@@ -580,12 +643,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     selector: 'ui-date-picker',
                     template: '',
                     host: {
-                        '[title]': 'title()',
-                        '[selection]': 'resolvedSelection()',
-                        '[initialDate]': 'initialDate()',
+                        '[title]': 'android ? undefined : title()',
+                        '[selection]': 'android ? undefined : resolvedSelection()',
+                        '[initialDate]': 'android ? initialDate() : undefined',
                         '[displayedComponents]': 'resolvedComponents()',
-                        '[range]': 'range()',
-                        '[accessibilityLabel]': 'accessibilityLabel()',
+                        '[range]': 'android ? undefined : range()',
+                        '[selectableDates]': 'android ? selectableDates() : undefined',
                         '[modifiers]': 'resolvedModifiers()',
                     },
                 }]
@@ -755,6 +818,9 @@ export class UiPicker {
     ])), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
     android = nativePlatform() === 'android';
+    /** SwiftUI's picker view draws nothing without a label, and a segmented one never shows it. */
+    shownLabel = computed(() => this.label() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shownLabel" }] : /* istanbul ignore next */ []));
     /** Whether Android's dropdown is open. */
     open = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
@@ -795,7 +861,7 @@ export class UiPicker {
         this.touch.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiPicker, isStandalone: true, selector: "ui-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, pickerStyle: { classPropertyName: "pickerStyle", publicName: "pickerStyle", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", selectionChange: "selectionChange" }, host: { properties: { "label": "android ? undefined : label()", "systemImage": "android ? undefined : systemImage()", "selection": "android ? undefined : value()", "modifiers": "android ? undefined : resolvedModifiers()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiPicker, isStandalone: true, selector: "ui-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, systemImage: { classPropertyName: "systemImage", publicName: "systemImage", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, pickerStyle: { classPropertyName: "pickerStyle", publicName: "pickerStyle", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", selectionChange: "selectionChange" }, host: { properties: { "label": "android ? undefined : shownLabel()", "systemImage": "android ? undefined : systemImage()", "selection": "android ? undefined : value()", "modifiers": "android ? undefined : resolvedModifiers()" } }, ngImport: i0, template: `
     @if (android) {
       @if (pickerStyle() === 'segmented') {
         <ui-single-choice-segmented-button-row>
@@ -890,7 +956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
     }
   `,
                     host: {
-                        '[label]': 'android ? undefined : label()',
+                        '[label]': 'android ? undefined : shownLabel()',
                         '[systemImage]': 'android ? undefined : systemImage()',
                         '[selection]': 'android ? undefined : value()',
                         '[modifiers]': 'android ? undefined : resolvedModifiers()',
@@ -918,7 +984,7 @@ export class UiToggle {
         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: { 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 });
+    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": "android ? undefined : 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,
@@ -928,7 +994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                     host: {
                         '[isOn]': 'android ? undefined : isOn()',
                         '[value]': 'android ? (isOn() ?? switchedOn()) : undefined',
-                        '[label]': 'label()',
+                        '[label]': 'android ? undefined : label()',
                         '[modifiers]': 'modifiers()',
                         '(checkedChange)': 'android && checked($event)',
                     },
@@ -1019,12 +1085,19 @@ 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. */
+/**
+ * A SwiftUI `Gauge`: `value` between `min` and `max`, drawn as `type` says, with its labels drawn as
+ * text in the slots SwiftUI reads them from, as `@expo/ui`'s `Gauge` draws them.
+ */
 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 });
+    /**
+     * How it is drawn, as the `gaugeStyle` modifier: `'automatic'`, `'circular'`,
+     * `'circularCapacity'`, `'linear'` or `'linearCapacity'`.
+     */
     type = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "type" }] : /* istanbul ignore next */ []));
     currentValueLabel = input(/* @ts-ignore */
@@ -1035,23 +1108,43 @@ export class UiGauge {
     ...(ngDevMode ? [undefined, { debugName: "maximumValueLabel" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    resolvedModifiers = computed(() => {
+        const style = this.type();
+        return withModifiers(this.modifiers(), style !== undefined && { $type: 'gaugeStyle', style });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedModifiers" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiGauge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiGauge, isStandalone: true, selector: "ui-gauge", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, currentValueLabel: { classPropertyName: "currentValueLabel", publicName: "currentValueLabel", isSignal: true, isRequired: false, transformFunction: null }, minimumValueLabel: { classPropertyName: "minimumValueLabel", publicName: "minimumValueLabel", isSignal: true, isRequired: false, transformFunction: null }, maximumValueLabel: { classPropertyName: "maximumValueLabel", publicName: "maximumValueLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "value": "value()", "min": "min()", "max": "max()", "type": "type()", "currentValueLabel": "currentValueLabel()", "minimumValueLabel": "minimumValueLabel()", "maximumValueLabel": "maximumValueLabel()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiGauge, isStandalone: true, selector: "ui-gauge", 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, currentValueLabel: { classPropertyName: "currentValueLabel", publicName: "currentValueLabel", isSignal: true, isRequired: false, transformFunction: null }, minimumValueLabel: { classPropertyName: "minimumValueLabel", publicName: "minimumValueLabel", isSignal: true, isRequired: false, transformFunction: null }, maximumValueLabel: { classPropertyName: "maximumValueLabel", publicName: "maximumValueLabel", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "value": "value()", "min": "min()", "max": "max()", "modifiers": "resolvedModifiers()" } }, ngImport: i0, template: `@if (currentValueLabel() !== undefined) {
+      <ui-slot name="currentValue"><ui-text [text]="currentValueLabel()" /></ui-slot>
+    }
+    @if (minimumValueLabel() !== undefined) {
+      <ui-slot name="minimumValue"><ui-text [text]="minimumValueLabel()" /></ui-slot>
+    }
+    @if (maximumValueLabel() !== undefined) {
+      <ui-slot name="maximumValue"><ui-text [text]="maximumValueLabel()" /></ui-slot>
+    }
+    <ng-content />`, isInline: true, dependencies: [{ kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }, { kind: "component", type: UiText, selector: "ui-text", inputs: ["text", "date", "dateStyle", "timerInterval", "countsDown", "modifiers"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiGauge, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-gauge',
-                    template: '<ng-content />',
+                    imports: [UiSlot, UiText],
+                    template: `@if (currentValueLabel() !== undefined) {
+      <ui-slot name="currentValue"><ui-text [text]="currentValueLabel()" /></ui-slot>
+    }
+    @if (minimumValueLabel() !== undefined) {
+      <ui-slot name="minimumValue"><ui-text [text]="minimumValueLabel()" /></ui-slot>
+    }
+    @if (maximumValueLabel() !== undefined) {
+      <ui-slot name="maximumValue"><ui-text [text]="maximumValueLabel()" /></ui-slot>
+    }
+    <ng-content />`,
                     host: {
                         '[value]': 'value()',
                         '[min]': 'min()',
                         '[max]': 'max()',
-                        '[type]': 'type()',
-                        '[currentValueLabel]': 'currentValueLabel()',
-                        '[minimumValueLabel]': 'minimumValueLabel()',
-                        '[maximumValueLabel]': 'maximumValueLabel()',
-                        '[modifiers]': 'modifiers()',
+                        '[modifiers]': 'resolvedModifiers()',
                     },
                 }]
         }], 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 }] }] } });
@@ -1372,22 +1465,33 @@ export class UiLabel {
     /** An SF Symbol name. */
     systemImage = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "systemImage" }] : /* istanbul ignore next */ []));
+    /**
+     * The colour of the symbol alone, drawn as the label's icon in that colour, since SwiftUI's
+     * label takes no colour. The `foregroundStyle` modifier colours the title too.
+     */
     color = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     modifiers = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    /** The icon's colour, when there is a symbol to draw in it. */
+    iconColor = computed(() => this.systemImage() === undefined ? undefined : foregroundColor(this.color()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconColor" }] : /* 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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()", "modifiers": "modifiers()" } }, ngImport: i0, template: `@if (iconColor(); as color) {
+    <ui-slot name="icon"><ui-image [systemName]="systemImage()" [modifiers]="[color]" /></ui-slot>
+  }`, isInline: true, dependencies: [{ kind: "component", type: UiImage, selector: "ui-image", inputs: ["systemName", "assetName", "uiImage", "size", "color", "modifiers"] }, { kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiLabel, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-label',
-                    template: '',
+                    imports: [UiImage, UiSlot],
+                    template: `@if (iconColor(); as color) {
+    <ui-slot name="icon"><ui-image [systemName]="systemImage()" [modifiers]="[color]" /></ui-slot>
+  }`,
                     host: {
                         '[title]': 'title()',
                         '[systemImage]': 'systemImage()',
-                        '[color]': 'color()',
                         '[modifiers]': 'modifiers()',
                     },
                 }]
@@ -1582,7 +1686,7 @@ const HALF_AND_FULL = ['medium', 'large'];
 /** The window's width as the engine knows it, or undefined before the platform has said. */
 function windowWidth() {
     const node = inject(ElementRef).nativeElement;
-    const engine = (node.host ?? inject(HostEngine));
+    const engine = (node.engine ?? inject(HostEngine));
     const read = () => engine.viewport?.width || undefined;
     const width = signal(read(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));