@ng-native/expo 0.13.0 → 0.15.0

package/dist/expo-ui-components.js

@@ -517,6 +517,10 @@ export class UiDatePicker {
     ...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
     selection = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "selection" }] : /* istanbul ignore next */ []));
+    /**
+     * What the picker shows. An empty list shows nothing in SwiftUI; Compose has no such choice,
+     * so on Android it shows the date and the time.
+     */
     displayedComponents = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "displayedComponents" }] : /* istanbul ignore next */ []));
     range = input(/* @ts-ignore */
@@ -535,6 +539,14 @@ export class UiDatePicker {
     android = nativePlatform() === 'android';
     resolvedSelection = computed(() => this.android ? undefined : (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(() => {
+        const shown = this.displayedComponents();
+        if (!this.android || !shown)
+            return shown;
+        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 */
     ...(ngDevMode ? [{ debugName: "initialDate" }] : /* istanbul ignore next */ []));
     resolvedModifiers = computed(() => this.android ? this.modifiers() : withDisabled(this.modifiers(), this.disabled()), /* @ts-ignore */
@@ -560,7 +572,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": "displayedComponents()", "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": "title()", "selection": "resolvedSelection()", "initialDate": "initialDate()", "displayedComponents": "resolvedComponents()", "range": "range()", "accessibilityLabel": "accessibilityLabel()", "modifiers": "resolvedModifiers()" } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiDatePicker, decorators: [{
             type: Component,
@@ -571,7 +583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                         '[title]': 'title()',
                         '[selection]': 'resolvedSelection()',
                         '[initialDate]': 'initialDate()',
-                        '[displayedComponents]': 'displayedComponents()',
+                        '[displayedComponents]': 'resolvedComponents()',
                         '[range]': 'range()',
                         '[accessibilityLabel]': 'accessibilityLabel()',
                         '[modifiers]': 'resolvedModifiers()',
@@ -580,11 +592,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], displayedComponents: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedComponents", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], accessibilityLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabel", 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"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }] } });
 /** How long after a date picker appears its first report is taken to be about itself. */
 const APPEARING_MS = 1000;
+/** Compose's `SingleChoiceSegmentedButtonRow`, Android only: a row of `ui-segmented-button`s. */
+export class UiSingleChoiceSegmentedButtonRow {
+    nativeView = nativeView();
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSingleChoiceSegmentedButtonRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSingleChoiceSegmentedButtonRow, isStandalone: true, selector: "ui-single-choice-segmented-button-row", inputs: { modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSingleChoiceSegmentedButtonRow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-single-choice-segmented-button-row',
+                    template: '<ng-content />',
+                    host: { '[modifiers]': 'modifiers()' },
+                }]
+        }], propDecorators: { modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** Compose's `SegmentedButton`, Android only, its label in a `<ui-slot name="label">`. */
+export class UiSegmentedButton {
+    nativeView = nativeView();
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    press = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSegmentedButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiSegmentedButton, isStandalone: true, selector: "ui-segmented-button", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { press: "press" }, host: { listeners: { "buttonPressed": "press.emit()" }, properties: { "selected": "selected()", "enabled": "enabled()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiSegmentedButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-segmented-button',
+                    template: '<ng-content />',
+                    host: {
+                        '[selected]': 'selected()',
+                        '[enabled]': 'enabled()',
+                        '[modifiers]': 'modifiers()',
+                        '(buttonPressed)': 'press.emit()',
+                    },
+                }]
+        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], press: [{ type: i0.Output, args: ["press"] }] } });
+/**
+ * Compose's `ExposedDropdownMenuBox`, Android only: an anchor, a view with the `menuAnchor`
+ * modifier, and the `ui-exposed-dropdown-menu` it opens. A tap on the anchor asks to open or close
+ * it, through `toggled`; `expanded` says which it is.
+ */
+export class UiExposedDropdownMenuBox {
+    nativeView = nativeView();
+    expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    toggled = output();
+    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: UiExposedDropdownMenuBox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiExposedDropdownMenuBox, isStandalone: true, selector: "ui-exposed-dropdown-menu-box", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, host: { listeners: { "expandedChange": "toggled.emit($event.nativeEvent.value)" }, properties: { "expanded": "expanded()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiExposedDropdownMenuBox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-exposed-dropdown-menu-box',
+                    template: '<ng-content />',
+                    host: {
+                        '[expanded]': 'expanded()',
+                        '[modifiers]': 'modifiers()',
+                        // Not a model: its output would be named for this event, and take it.
+                        '(expandedChange)': 'toggled.emit($event.nativeEvent.value)',
+                    },
+                }]
+        }], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }] } });
+/** Compose's `ExposedDropdownMenu`, Android only: the `ui-dropdown-menu-item`s a box opens. */
+export class UiExposedDropdownMenu {
+    nativeView = nativeView();
+    expanded = input(false, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    /** A tap outside the menu, or Back: the box should close it. */
+    dismiss = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiExposedDropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiExposedDropdownMenu, isStandalone: true, selector: "ui-exposed-dropdown-menu", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "dismissRequest": "dismiss.emit()" }, properties: { "expanded": "expanded()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiExposedDropdownMenu, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-exposed-dropdown-menu',
+                    template: '<ng-content />',
+                    host: {
+                        '[expanded]': 'expanded()',
+                        '[modifiers]': 'modifiers()',
+                        '(dismissRequest)': 'dismiss.emit()',
+                    },
+                }]
+        }], propDecorators: { expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+/** Compose's `DropdownMenuItem`, Android only, its text in a `<ui-slot name="text">`. */
+export class UiDropdownMenuItem {
+    nativeView = nativeView();
+    enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    modifiers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "modifiers" }] : /* istanbul ignore next */ []));
+    press = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiDropdownMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: UiDropdownMenuItem, isStandalone: true, selector: "ui-dropdown-menu-item", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, modifiers: { classPropertyName: "modifiers", publicName: "modifiers", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { press: "press" }, host: { listeners: { "itemPressed": "press.emit()" }, properties: { "enabled": "enabled()", "modifiers": "modifiers()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiDropdownMenuItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-dropdown-menu-item',
+                    template: '<ng-content />',
+                    host: {
+                        '[enabled]': 'enabled()',
+                        '[modifiers]': 'modifiers()',
+                        '(itemPressed)': 'press.emit()',
+                    },
+                }]
+        }], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "enabled", required: false }] }], modifiers: [{ type: i0.Input, args: [{ isSignal: true, alias: "modifiers", required: false }] }], press: [{ type: i0.Output, args: ["press"] }] } });
 /**
- * A SwiftUI `Picker`, iOS only, as a Signal Forms field: `<ui-picker [options]="rooms"
- * [formField]="f.room" />`. `options` draws the choices, each tagged with its value, which is the
- * content slot and `tag` modifiers `@expo/ui` otherwise wants written out by hand; children still
- * work for anything richer. `pickerStyle` is SwiftUI's (`menu`, `segmented`, `wheel`, `inline`).
+ * A segmented picker's `font` modifiers again, as `@ng-native/expo`'s own modifier: SwiftUI draws
+ * the segments as a `UISegmentedControl`, which `font` does not reach. In a build without that
+ * modifier, Expo Go's, the segments stay in the system font.
+ */
+function segmentFonts(modifiers) {
+    const segmented = modifiers.some((m) => m.$type === 'pickerStyle' && m['style'] === 'segmented');
+    if (!segmented)
+        return [];
+    return modifiers
+        .filter((m) => m.$type === 'font')
+        .map((m) => ({ ...m, $type: 'ngNativeSegmentedFont' }));
+}
+/**
+ * A SwiftUI `Picker` as a Signal Forms field: `<ui-picker [options]="rooms" [formField]="f.room"
+ * />`. `options` draws the choices, each tagged with its value, which is the content slot and `tag`
+ * modifiers `@expo/ui` otherwise wants written out by hand; children still work for anything
+ * richer on iOS. `pickerStyle` is SwiftUI's (`menu`, `segmented`, `wheel`, `inline`).
+ *
+ * Compose has no `Picker`, so on Android the options are drawn with its own controls: `segmented`
+ * as a row of segmented buttons, and any other style as an exposed dropdown menu under the chosen
+ * option. `label`, `systemImage`, children and `modifiers` are SwiftUI's alone. A `font` modifier
+ * reaches a segmented picker's segments in a development build, not in Expo Go.
  */
 export class UiPicker {
     nativeView = nativeView();
@@ -612,54 +754,146 @@ export class UiPicker {
         [{ $type: 'tag', tag: option.value }],
     ])), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
+    android = nativePlatform() === 'android';
+    /** Whether Android's dropdown is open. */
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /**
+     * What Android's dropdown shows closed: the chosen option, or the label before there is one,
+     * with the arrow that says a tap opens it, which plain text otherwise does not.
+     */
+    chosenLabel = computed(() => {
+        const chosen = this.options()?.find((option) => option.value === this.value());
+        return `${chosen?.label ?? this.label() ?? ''} \u25BE`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chosenLabel" }] : /* istanbul ignore next */ []));
+    /** What anchors Android's dropdown to the option it shows. */
+    anchor = computed(() => [
+        { $type: 'menuAnchor', type: 'primaryNotEditable', enabled: !this.disabled() },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []));
     resolvedModifiers = computed(() => {
         const style = this.pickerStyle();
         const own = style
             ? [{ $type: 'pickerStyle', style }, ...(this.modifiers() ?? [])]
             : this.modifiers();
-        return withDisabled(own, this.disabled());
+        return withDisabled(own && [...own, ...segmentFonts(own)], this.disabled());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedModifiers" }] : /* istanbul ignore next */ []));
     constructor() {
         listen('topSelectionChange', ({ selection }) => {
             if (typeof selection !== 'string' && typeof selection !== 'number')
                 return;
-            this.value.set(selection);
-            this.touch.emit();
+            this.choose(selection);
         });
     }
+    choose(selection) {
+        this.open.set(false);
+        if (this.disabled())
+            return;
+        this.value.set(selection);
+        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": "label()", "systemImage": "systemImage()", "selection": "value()", "modifiers": "resolvedModifiers()" } }, ngImport: i0, template: `
-    @if (options(); as options) {
-      <ui-slot name="content">
-        @for (option of options; track option.value) {
-          <ui-text [text]="option.label" [modifiers]="tags().get(option.value)" />
-        }
-      </ui-slot>
+    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: `
+    @if (android) {
+      @if (pickerStyle() === 'segmented') {
+        <ui-single-choice-segmented-button-row>
+          @for (option of options() ?? []; track option.value) {
+            <ui-segmented-button
+              [selected]="option.value === value()"
+              [enabled]="!disabled()"
+              (press)="choose(option.value)"
+            >
+              <ui-slot name="label"><ui-text [text]="option.label" /></ui-slot>
+            </ui-segmented-button>
+          }
+        </ui-single-choice-segmented-button-row>
+      } @else {
+        <ui-exposed-dropdown-menu-box
+          [expanded]="open()"
+          (toggled)="open.set(!disabled() && $event)"
+        >
+          <ui-text [text]="chosenLabel()" [modifiers]="anchor()" />
+          <ui-exposed-dropdown-menu [expanded]="open()" (dismiss)="open.set(false)">
+            @for (option of options() ?? []; track option.value) {
+              <ui-dropdown-menu-item [enabled]="!disabled()" (press)="choose(option.value)">
+                <ui-slot name="text"><ui-text [text]="option.label" /></ui-slot>
+              </ui-dropdown-menu-item>
+            }
+          </ui-exposed-dropdown-menu>
+        </ui-exposed-dropdown-menu-box>
+      }
+    } @else {
+      @if (options(); as options) {
+        <ui-slot name="content">
+          @for (option of options; track option.value) {
+            <ui-text [text]="option.label" [modifiers]="tags().get(option.value)" />
+          }
+        </ui-slot>
+      }
+      <ng-content />
     }
-    <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"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: UiDropdownMenuItem, selector: "ui-dropdown-menu-item", inputs: ["enabled", "modifiers"], outputs: ["press"] }, { kind: "component", type: UiExposedDropdownMenu, selector: "ui-exposed-dropdown-menu", inputs: ["expanded", "modifiers"], outputs: ["dismiss"] }, { kind: "component", type: UiExposedDropdownMenuBox, selector: "ui-exposed-dropdown-menu-box", inputs: ["expanded", "modifiers"], outputs: ["toggled"] }, { kind: "component", type: UiSegmentedButton, selector: "ui-segmented-button", inputs: ["selected", "enabled", "modifiers"], outputs: ["press"] }, { kind: "component", type: UiSingleChoiceSegmentedButtonRow, selector: "ui-single-choice-segmented-button-row", inputs: ["modifiers"] }, { 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: UiPicker, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-picker',
-                    imports: [UiSlot, UiText],
+                    imports: [
+                        UiDropdownMenuItem,
+                        UiExposedDropdownMenu,
+                        UiExposedDropdownMenuBox,
+                        UiSegmentedButton,
+                        UiSingleChoiceSegmentedButtonRow,
+                        UiSlot,
+                        UiText,
+                    ],
                     template: `
-    @if (options(); as options) {
-      <ui-slot name="content">
-        @for (option of options; track option.value) {
-          <ui-text [text]="option.label" [modifiers]="tags().get(option.value)" />
-        }
-      </ui-slot>
+    @if (android) {
+      @if (pickerStyle() === 'segmented') {
+        <ui-single-choice-segmented-button-row>
+          @for (option of options() ?? []; track option.value) {
+            <ui-segmented-button
+              [selected]="option.value === value()"
+              [enabled]="!disabled()"
+              (press)="choose(option.value)"
+            >
+              <ui-slot name="label"><ui-text [text]="option.label" /></ui-slot>
+            </ui-segmented-button>
+          }
+        </ui-single-choice-segmented-button-row>
+      } @else {
+        <ui-exposed-dropdown-menu-box
+          [expanded]="open()"
+          (toggled)="open.set(!disabled() && $event)"
+        >
+          <ui-text [text]="chosenLabel()" [modifiers]="anchor()" />
+          <ui-exposed-dropdown-menu [expanded]="open()" (dismiss)="open.set(false)">
+            @for (option of options() ?? []; track option.value) {
+              <ui-dropdown-menu-item [enabled]="!disabled()" (press)="choose(option.value)">
+                <ui-slot name="text"><ui-text [text]="option.label" /></ui-slot>
+              </ui-dropdown-menu-item>
+            }
+          </ui-exposed-dropdown-menu>
+        </ui-exposed-dropdown-menu-box>
+      }
+    } @else {
+      @if (options(); as options) {
+        <ui-slot name="content">
+          @for (option of options; track option.value) {
+            <ui-text [text]="option.label" [modifiers]="tags().get(option.value)" />
+          }
+        </ui-slot>
+      }
+      <ng-content />
     }
-    <ng-content />
   `,
                     host: {
-                        '[label]': 'label()',
-                        '[systemImage]': 'systemImage()',
-                        '[selection]': 'value()',
-                        '[modifiers]': 'resolvedModifiers()',
+                        '[label]': 'android ? undefined : label()',
+                        '[systemImage]': 'android ? undefined : systemImage()',
+                        '[selection]': 'android ? undefined : value()',
+                        '[modifiers]': 'android ? undefined : resolvedModifiers()',
                     },
                 }]
         }], 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"] }] } });
@@ -1220,7 +1454,13 @@ 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 }] }] } });
-/** A SwiftUI `Section` of a form or a list, under `title`. */
+/**
+ * A SwiftUI `Section` of a form or a list, under `title`, iOS only. A `<ui-slot name="header">`
+ * is its header in place of a `title`, and a `<ui-slot name="footer">` is the note under its rows.
+ * When both a non-empty `title` and a header slot are set, `@expo/ui`'s `SectionView` draws the
+ * `title` and drops the slot; an empty `title` counts as unset. The slot's `name` is written as it is,
+ * not bound, as that is what picks it out of the rows.
+ */
 export class UiSection {
     nativeView = nativeView();
     title = input(/* @ts-ignore */
@@ -1228,14 +1468,18 @@ 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: '<ui-slot name="content"><ng-content /></ui-slot>', isInline: true, dependencies: [{ kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }] });
+    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 select="ui-slot[name=header]" />
+    <ui-slot name="content"><ng-content /></ui-slot>
+    <ng-content select="ui-slot[name=footer]" />`, 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',
                     imports: [UiSlot],
-                    template: '<ui-slot name="content"><ng-content /></ui-slot>',
+                    template: `<ng-content select="ui-slot[name=header]" />
+    <ui-slot name="content"><ng-content /></ui-slot>
+    <ng-content select="ui-slot[name=footer]" />`,
                     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 }] }] } });
@@ -1382,8 +1626,9 @@ function windowWidth() {
  * Unlike the other components here, the element this is mounted on is a plain view, which takes
  * no room and needs no `ui-host` around it. The sheet is inside it, wrapped as `@expo/ui`'s own
  * React component wraps one: a `ui-host`, the sheet, on iOS a `ui-group` that carries the
- * presentation modifiers, and a `ui-view-host` holding the one view the content goes in. With
- * toolbar items, the view host is in a `ui-toolbar` in a `ui-navigation-stack`, under the group.
+ * presentation modifiers, and a `ui-view-host` holding the one view the content goes in. Where the
+ * build has SwiftUI's toolbar and the sheet is not sized to its content, the view host is in a
+ * `ui-navigation-stack` under the group, over a `ui-toolbar` that holds the items.
  */
 export class UiBottomSheet {
     /**
@@ -1432,6 +1677,14 @@ export class UiBottomSheet {
     ...(ngDevMode ? [undefined, { debugName: "detents" }] : /* istanbul ignore next */ []));
     /** Whether the grabber shows at the top of the sheet. */
     showDragIndicator = input(true, { ...(ngDevMode ? { debugName: "showDragIndicator" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The colour of the sheet behind its content: SwiftUI's `presentationBackground` on iOS, where
+     * a sheet below its full height is otherwise drawn as glass, and Compose's `containerColor` on
+     * Android. Over a `background-color` the element has from CSS, which colours the sheet the same
+     * way. Neither is the sheet as the system draws it.
+     */
+    backgroundColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "backgroundColor" }] : /* istanbul ignore next */ []));
     /**
      * The sheet has finished closing, whether the user dismissed it or `open` was set false: the
      * moment another sheet or a dialog can be presented.
@@ -1443,6 +1696,14 @@ export class UiBottomSheet {
     /** Whether the sheet has a toolbar: it has items for one, and the build has the views. */
     toolbar = computed(() => this.toolbarInBuild && this.toolbarItems().length > 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+    /**
+     * A sheet's bar never shows a large title, but a navigation stack leaves room for one under its
+     * bar. `@expo/ui` has no modifier for the title's display mode, so `@ng-native/expo` registers
+     * one natively, in a build with `@expo/ui`. One without it, Expo Go's, ignores the modifier.
+     */
+    inlineTitle = [
+        { $type: 'ngNativeInlineNavigationTitle' },
+    ];
     /** SwiftUI's sheet stays in the tree; anywhere else it is there while it shows. */
     swiftUI = nativePlatform() === 'ios';
     width = windowWidth();
@@ -1456,8 +1717,8 @@ export class UiBottomSheet {
      * Whether the sheet is sized to its content, as it opened: a view host takes its sizing once,
      * as it mounts. SwiftUI's sheet is not where it has detents to rest at, nor where it has a
      * toolbar: a navigation stack fills what it is given, and the bar is no part of the content.
-     * A toolbar that comes or goes while the sheet is open is followed, since the view host is made
-     * again around it.
+     * A toolbar that comes or goes while such a sheet is open is followed, since the view host is
+     * made again around it.
      */
     fits = computed(() => {
         this.mounted();
@@ -1465,6 +1726,17 @@ export class UiBottomSheet {
         return untracked(() => this.fitToContents() && !(this.swiftUI && (this.detents()?.length || toolbar)));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fits" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the content is in a navigation stack, beside a toolbar: wherever the build has one and
+     * the sheet is not sized to its content, items or none, so that an item coming or going never
+     * makes the view host again. `@expo/ui`'s view host takes its content's touches as it appears and
+     * gives them up as it disappears, and one made again around the same content appears before the
+     * old one has gone, leaving the content none. A stack with no item draws no bar. The toolbar is
+     * beside the view host rather than around it, since SwiftUI makes the view a toolbar is on again
+     * as its items change.
+     */
+    stacked = computed(() => this.toolbarInBuild && !this.fits(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
     /**
      * SwiftUI reads how a sheet is presented from modifiers on its content, not from props. The
      * detents of a sheet not sized to its content are followed while it is open.
@@ -1480,8 +1752,28 @@ export class UiBottomSheet {
             $type: 'presentationDragIndicator',
             visibility: this.showDragIndicator() ? 'visible' : 'hidden',
         },
+        ...this.background(),
     ], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    /** The `background-color` the element has from CSS, which the sheet draws rather than it. */
+    painted = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "painted" }] : /* istanbul ignore next */ []));
+    /** The sheet's colour: the input's, or else the element's from CSS. */
+    color = computed(() => this.backgroundColor() || this.painted() || undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /**
+     * The sheet's own background, a colour converted as any colour is, where one is given. As a
+     * shape style for `@expo/ui` 57.0.17 and later, and as the plain colour the versions before it
+     * read, Expo Go's among them. Each ignores the other's field.
+     */
+    background = computed(() => {
+        const given = this.color();
+        if (given === undefined)
+            return [];
+        const color = this.engine?.color(given) ?? given;
+        return [{ $type: 'presentationBackground', style: { type: 'color', color }, color }];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
     /**
      * The one view a view host holds. Sized to its content it needs a width of its own, the
      * window's; otherwise it fills the height the sheet gives it.
@@ -1497,6 +1789,10 @@ export class UiBottomSheet {
             if (!this.open())
                 untracked(() => this.close());
         });
+        const host = inject(ElementRef).nativeElement;
+        const stop = this.engine?.takePaint?.(host, (color) => this.painted.set(color));
+        if (stop)
+            inject(DestroyRef).onDestroy(stop);
         if (this.swiftUI && !this.toolbarInBuild) {
             const warned = effect(() => {
                 if (!this.toolbarItems().length)
@@ -1588,7 +1884,7 @@ export class UiBottomSheet {
         afterNextRender(() => this.mounted.set(this.open()), { injector: this.injector });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiBottomSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiBottomSheet, isStandalone: true, selector: "ui-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, fitToContents: { classPropertyName: "fitToContents", publicName: "fitToContents", isSignal: true, isRequired: false, transformFunction: null }, detents: { classPropertyName: "detents", publicName: "detents", isSignal: true, isRequired: false, transformFunction: null }, showDragIndicator: { classPropertyName: "showDragIndicator", publicName: "showDragIndicator", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", dismissed: "dismissed" }, host: { properties: { "style.position": "\"absolute\"" } }, queries: [{ propertyName: "toolbarItems", predicate: UiToolbarItem, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: UiBottomSheet, isStandalone: true, selector: "ui-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, fitToContents: { classPropertyName: "fitToContents", publicName: "fitToContents", isSignal: true, isRequired: false, transformFunction: null }, detents: { classPropertyName: "detents", publicName: "detents", isSignal: true, isRequired: false, transformFunction: null }, showDragIndicator: { classPropertyName: "showDragIndicator", publicName: "showDragIndicator", isSignal: true, isRequired: false, transformFunction: null }, backgroundColor: { classPropertyName: "backgroundColor", publicName: "backgroundColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", dismissed: "dismissed" }, host: { properties: { "style.position": "\"absolute\"" } }, queries: [{ propertyName: "toolbarItems", predicate: UiToolbarItem, isSignal: true }], viewQueries: [{ propertyName: "sheet", first: true, predicate: ["sheet"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     <ng-template #content><ng-content /></ng-template>
     @if (swiftUI) {
       <ui-host style="position: absolute" pointerEvents="none" [style.width.px]="width()">
@@ -1601,14 +1897,17 @@ export class UiBottomSheet {
         >
           @if (mounted()) {
             <ui-group [modifiers]="presentation()">
-              @if (toolbar()) {
+              @if (stacked()) {
                 <ui-navigation-stack>
-                  <ui-toolbar>
+                  <ui-zstack>
+                    <ui-toolbar [modifiers]="inlineTitle">
+                      <ui-spacer />
+                      <ui-slot name="content"><ng-content select="ui-toolbar-item" /></ui-slot>
+                    </ui-toolbar>
                     <ui-view-host layoutRoot [matchContents]="fits() || undefined">
                       <ui-bottom-sheet-content [style]="body()" [content]="content" />
                     </ui-view-host>
-                    <ui-slot name="content"><ng-content select="ui-toolbar-item" /></ui-slot>
-                  </ui-toolbar>
+                  </ui-zstack>
                 </ui-navigation-stack>
               } @else {
                 <ui-view-host layoutRoot [matchContents]="fits() || undefined">
@@ -1624,6 +1923,7 @@ export class UiBottomSheet {
         <ui-bottom-sheet-view
           #sheet
           [showDragHandle]="showDragIndicator()"
+          [containerColor]="color()"
           [skipPartiallyExpanded]="fits()"
           (dismissRequest)="dismissRequested($event)"
         >
@@ -1633,7 +1933,7 @@ export class UiBottomSheet {
         </ui-bottom-sheet-view>
       </ui-host>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: UiBottomSheetContent, selector: "ui-bottom-sheet-content", inputs: ["content"] }, { kind: "component", type: UiBottomSheetView, selector: "ui-bottom-sheet-view", inputs: ["isPresented", "fitToContents", "showDragHandle", "skipPartiallyExpanded"], outputs: ["isPresentedChange", "dismiss", "dismissRequest"] }, { kind: "component", type: UiGroup, selector: "ui-group", inputs: ["modifiers"] }, { kind: "component", type: UiHost, selector: "ui-host", inputs: ["matchContents", "ignoreSafeArea", "useViewportSizeMeasurement"] }, { kind: "component", type: UiNavigationStack, selector: "ui-navigation-stack", inputs: ["modifiers"] }, { kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }, { kind: "component", type: UiToolbar, selector: "ui-toolbar", inputs: ["modifiers"] }, { kind: "component", type: UiViewHost, selector: "ui-view-host", inputs: ["matchContents", "layoutRoot", "modifiers"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: UiBottomSheetContent, selector: "ui-bottom-sheet-content", inputs: ["content"] }, { kind: "component", type: UiBottomSheetView, selector: "ui-bottom-sheet-view", inputs: ["isPresented", "fitToContents", "showDragHandle", "containerColor", "skipPartiallyExpanded"], outputs: ["isPresentedChange", "dismiss", "dismissRequest"] }, { kind: "component", type: UiGroup, selector: "ui-group", inputs: ["modifiers"] }, { kind: "component", type: UiHost, selector: "ui-host", inputs: ["matchContents", "ignoreSafeArea", "useViewportSizeMeasurement"] }, { kind: "component", type: UiNavigationStack, selector: "ui-navigation-stack", inputs: ["modifiers"] }, { kind: "component", type: UiSlot, selector: "ui-slot", inputs: ["name", "extraProps"] }, { kind: "component", type: UiSpacer, selector: "ui-spacer", inputs: ["modifiers"] }, { kind: "component", type: UiToolbar, selector: "ui-toolbar", inputs: ["modifiers"] }, { kind: "component", type: UiViewHost, selector: "ui-view-host", inputs: ["matchContents", "layoutRoot", "modifiers"] }, { kind: "component", type: UiZStack, selector: "ui-zstack", inputs: ["alignment", "modifiers"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: UiBottomSheet, decorators: [{
             type: Component,
@@ -1646,8 +1946,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                         UiHost,
                         UiNavigationStack,
                         UiSlot,
+                        UiSpacer,
                         UiToolbar,
                         UiViewHost,
+                        UiZStack,
                     ],
                     template: `
     <ng-template #content><ng-content /></ng-template>
@@ -1662,14 +1964,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         >
           @if (mounted()) {
             <ui-group [modifiers]="presentation()">
-              @if (toolbar()) {
+              @if (stacked()) {
                 <ui-navigation-stack>
-                  <ui-toolbar>
+                  <ui-zstack>
+                    <ui-toolbar [modifiers]="inlineTitle">
+                      <ui-spacer />
+                      <ui-slot name="content"><ng-content select="ui-toolbar-item" /></ui-slot>
+                    </ui-toolbar>
                     <ui-view-host layoutRoot [matchContents]="fits() || undefined">
                       <ui-bottom-sheet-content [style]="body()" [content]="content" />
                     </ui-view-host>
-                    <ui-slot name="content"><ng-content select="ui-toolbar-item" /></ui-slot>
-                  </ui-toolbar>
+                  </ui-zstack>
                 </ui-navigation-stack>
               } @else {
                 <ui-view-host layoutRoot [matchContents]="fits() || undefined">
@@ -1685,6 +1990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
         <ui-bottom-sheet-view
           #sheet
           [showDragHandle]="showDragIndicator()"
+          [containerColor]="color()"
           [skipPartiallyExpanded]="fits()"
           (dismissRequest)="dismissRequested($event)"
         >
@@ -1699,5 +2005,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { sheet: [{ type: i0.ViewChild, args: ['sheet', { ...{
                             read: ElementRef,
-                        }, isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], fitToContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToContents", required: false }] }], detents: [{ type: i0.Input, args: [{ isSignal: true, alias: "detents", required: false }] }], showDragIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDragIndicator", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], toolbarItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UiToolbarItem), { isSignal: true }] }] } });
+                        }, isSignal: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], fitToContents: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitToContents", required: false }] }], detents: [{ type: i0.Input, args: [{ isSignal: true, alias: "detents", required: false }] }], showDragIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDragIndicator", required: false }] }], backgroundColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColor", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], toolbarItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UiToolbarItem), { isSignal: true }] }] } });
 //# sourceMappingURL=expo-ui-components.js.map