@blotch/dolan 22.2.4 → 22.2.6

package/dist/ui/components/dock/dock.ts

@@ -2,11 +2,14 @@ import {
   Component,
   Directive,
   ElementRef,
+  Injector,
+  Renderer2,
   ViewEncapsulation,
   computed,
   contentChild,
   contentChildren,
   effect,
+  forwardRef,
   inject,
   input,
   output,
@@ -35,6 +38,17 @@ import { type GlassShape, UiGlass, UiGlassGroup } from '../glass/glass';
 import { type GlassDesign, injectGlassDesign } from '../glass/glass-design';
 import { injectIconColor, UI_ICON_COLOR } from '../icon/icon-theme';
 import { type IconName, ICONS } from '../icon/icons';
+import {
+  KEYBOARD_GAP,
+  keyboardLift,
+  keyboardScreen,
+  measureForKeyboard,
+} from '../search-field/keyboard';
+import {
+  type SearchFieldContainer,
+  UI_SEARCH_FIELD_CONTAINER,
+  UiSearchField,
+} from '../search-field/search-field';
 import { UiDockState } from './dock-scroll';
 
 /** The dock's sizes and shapes in one design. Sizes are in px. */
@@ -127,6 +141,15 @@ const MINIMIZED_SIZE = 48;
  */
 const MATERIAL_HIDDEN_OFFSET = 64;
 
+/**
+ * The search field's heights in the dock, in px: iOS 26's, as tall as the
+ * minimized bar beside it; Material 3's search bar; and the bar before
+ * iOS 26 that holds UISearchBar's 36pt field, 8pt in from its edges.
+ */
+const GLASS_SEARCH_SIZE = MINIMIZED_SIZE;
+const MATERIAL_SEARCH_HEIGHT = 56;
+const FROSTED_SEARCH_HEIGHT = 52;
+
 /**
  * Glass shapes this close merge, in px: just under the gap between them, so
  * the bar and the action stay apart at rest, and reach for each other as the
@@ -149,6 +172,18 @@ const FRAME_TRANSITION = [
   .map((property) => `${property} ${DURATION.slow + 50}ms ${EASING.sheet}`)
   .join(', ');
 
+/**
+ * How the dock follows the keyboard up and back down. The keyboard's height
+ * arrives a little after it starts to move, so it's quicker than the frames.
+ */
+const KEYBOARD_TRANSITION = `padding-bottom ${DURATION.normal}ms ${EASING.sheet}`;
+
+/** The action's icon, fading as the action shrinks into the search field. */
+const ICON_OUT_TRANSITION = `opacity ${DURATION.fast}ms ${EASING.accelerate}`;
+
+/** The search field's content, fading in as its glass grows. */
+const SEARCH_IN_TRANSITION = `opacity ${DURATION.normal}ms ${EASING.decelerate} ${DURATION.fast}ms`;
+
 /** The selection capsule's slide, with a slight overshoot, and its fade. */
 const CAPSULE_TRANSITION = `transform ${DURATION.slow}ms ${EASING.springSubtle}, opacity ${DURATION.normal}ms ${EASING.standard}`;
 
@@ -202,6 +237,11 @@ const iconSvg = (icon: IconName, color: string): string =>
 const itemType = () => UiDockItem;
 const actionType = () => UiDockAction;
 const accessoryType = () => UiDockAccessory;
+const searchFieldType = () => UiSearchField;
+/**
+ * UiDock, for its own providers, which run before the class is defined.
+ */
+const dockType = () => UiDock;
 
 /**
  * Marks the content of the dock's accessory: a bar above the dock for
@@ -255,19 +295,50 @@ export class UiDockAccessory {}
  *   group, and the accessory a capsule above. It minimizes as content
  *   scrolls down (see UiDockScroll): the bar shrinks to the selected item's
  *   icon, and the accessory moves down between it and the action.
- * - `'frosted'` (iOS 15 to 25): the tab bar of that time, edge to edge on a
- *   blur material, with the action as its last button. It doesn't minimize.
+ * - `'frosted'` (iOS 15 to 25): the tab bar of that time, edge to edge on
+ *   the bars' chrome material, with the action as its last button. It
+ *   doesn't minimize.
  * - `'material'` (Android): a Material 3 Expressive floating toolbar, with an
  *   active indicator behind the selected item's icon, and the action as a
  *   floating action button. Minimizing slides the toolbar away and leaves
  *   the button.
+ *
+ * With a `<ui-search-field>` in it as well, the action opens a search field
+ * at the bottom of the screen, as iOS 26 searches on iPhone:
+ *
+ * ```html
+ * <ui-dock>
+ *   <ui-dock-item route="/home" icon="home" label="Home" />
+ *   <ui-dock-action route="/search" icon="search" label="Search" />
+ *   <ui-search-field [(value)]="query" (submitted)="search($event)" />
+ * </ui-dock>
+ * ```
+ *
+ * With a `route`, it's the search tab: the field is open while the route is
+ * active. Without one, pressing the action opens it and focuses it, and
+ * UiDockState's `searching` says whether it's open. On glass, the action
+ * grows into the field across the bottom while the bar shrinks to a button
+ * that goes back to the last item. On Material, the action grows into a
+ * search bar and the toolbar slides away; the field's back arrow returns.
+ * Before iOS 26, the field opens in a bar above the tab bar. The field rises
+ * with the dock above the keyboard.
  */
 @Component({
   selector: 'ui-dock',
   imports: [LYNX_ELEMENTS, UiGlass, UiGlassGroup],
   encapsulation: ViewEncapsulation.None,
-  providers: [{ provide: UI_ICON_COLOR, useValue: ACCESSORY_ICON_COLOR }],
-  host: { '[class]': 'hostClass()' },
+  providers: [
+    { provide: UI_ICON_COLOR, useValue: ACCESSORY_ICON_COLOR },
+    // The search field in the dock draws only its content, in the dock's
+    // glass, and tells the dock when it's canceled.
+    { provide: UI_SEARCH_FIELD_CONTAINER, useExisting: forwardRef(dockType) },
+  ],
+  host: {
+    '[class]': 'hostClass()',
+    // Above the keyboard while the search field has it.
+    '[style.padding-bottom]': 'keyboardPadding()',
+    '[style.transition]': 'keyboardTransition()',
+  },
   // The shapes are direct children of the glass group, so they merge on iOS
   // and the web. Each one keeps its element as the dock minimizes and
   // expands: its frame moves and resizes with a CSS transition, which iOS's
@@ -279,6 +350,7 @@ export class UiDockAccessory {}
   //
   // The dock measures its width with an empty view rather than on the
   // group: Lynx for Web sends no layoutchange for a blur-view.
+
   template: `
     <view class="h-0 w-full" (bindlayoutchange)="measure($event)"></view>
     <blur-view
@@ -291,6 +363,7 @@ export class UiDockAccessory {}
         <blur-view
           ui-glass
           interactive
+          material="chrome"
           class="flex-row flex absolute overflow-hidden"
           [shape]="look().accessoryShape"
           [radius]="accessoryRadius()"
@@ -302,6 +375,7 @@ export class UiDockAccessory {}
       <blur-view
         ui-glass
         interactive
+        material="chrome"
         [class]="barClass()"
         [shape]="look().barShape"
         [radius]="look().radius"
@@ -316,7 +390,7 @@ export class UiDockAccessory {}
           accessibility-traits="tabbar"
           [class]="rowClass()"
           [style]="rowStyle()"
-          [attr.accessibility-elements-hidden]="minimized() || null"
+          [attr.accessibility-elements-hidden]="rowHidden() || null"
         >
           <view
             class="rounded-full bg-glass-foreground absolute bottom-0 left-0 top-0"
@@ -324,17 +398,18 @@ export class UiDockAccessory {}
           ></view>
           <ng-content />
         </view>
-        @if (minimized()) {
+        @if (barCollapsed()) {
           <!-- Minimized, the bar is one button that brings the dock back,
-               showing the selected item's icon. -->
+               showing the selected item's icon. While the glass dock
+               searches, it's the button that goes back to the last item. -->
           <view
             #restore
             class="items-center flex absolute bottom-0 left-0 right-0 top-0 justify-center"
             accessibility-element="true"
             accessibility-traits="button"
             [attr.accessibility-label]="expandLabel()"
-            [attr.accessibility-value]="selectedItem()?.label()"
-            (bindtap)="expand()"
+            [attr.accessibility-value]="restoreItem()?.label()"
+            (bindtap)="onRestore()"
           >
             <svg
               [attr.content]="minimizedIcon()"
@@ -347,11 +422,13 @@ export class UiDockAccessory {}
         <blur-view
           ui-glass
           interactive
+          material="chrome"
           [class]="actionClass()"
           [shape]="look().actionShape"
           [radius]="look().radius"
           [tint]="actionTint()"
           [style]="frames().action"
+          [attr.accessibility-elements-hidden]="actionHidden() || null"
         >
           @if (design() === 'frosted') {
             <view
@@ -360,11 +437,56 @@ export class UiDockAccessory {}
           }
           <ng-content select="ui-dock-action" />
         </blur-view>
+        @if (searchField(); as field) {
+          <!-- The search field's own shape, after the action so it draws
+               over it: it grows out of the action as the search opens, and
+               shrinks back into it as it closes. -->
+          <blur-view
+            ui-glass
+            interactive
+            material="chrome"
+            class="flex-row flex absolute overflow-hidden"
+            [shape]="searchShape()"
+            [radius]="0"
+            [style]="frames().search"
+          >
+            @if (design() === 'frosted') {
+              <view
+                class="h-[0.5px] bg-border absolute left-0 right-0 top-0"
+              ></view>
+            }
+            <view
+              [class]="searchContentClass()"
+              [style]="searchContentStyle()"
+              [attr.accessibility-elements-hidden]="!searching() || null"
+            >
+              <ng-content select="ui-search-field" />
+            </view>
+          </blur-view>
+          @if (design() === 'glass' && field.cancelable()) {
+            <!-- iOS 26's cancel beside the field: a glass circle that grows
+                 out of the field's end while it's in use. -->
+            <blur-view
+              ui-glass
+              interactive
+              shape="circle"
+              class="items-center flex absolute justify-center overflow-hidden"
+              accessibility-element="true"
+              accessibility-traits="button"
+              [attr.accessibility-label]="field.cancelLabel()"
+              [attr.accessibility-elements-hidden]="!cancelShown() || null"
+              [style]="frames().cancel"
+              (bindtap)="field.cancel()"
+            >
+              <svg [attr.content]="cancelIcon()" [style]="cancelIconStyle()" />
+            </blur-view>
+          }
+        }
       }
     </blur-view>
   `,
 })
-export class UiDock {
+export class UiDock implements SearchFieldContainer {
   /**
    * What a screen reader says for the minimized dock, a button that brings
    * it back. The selected item's label follows it.
@@ -375,6 +497,9 @@ export class UiDock {
   readonly #state = inject(UiDockState);
   readonly #settings = inject(LynxAccessibilitySettings);
   readonly #resolveColor = injectIconColor();
+  readonly #injector = inject(Injector);
+  readonly #renderer = inject(Renderer2);
+  readonly #host = inject(ElementRef);
 
   /** The design on this platform (see GlassDesign), which the items follow. */
   readonly design = injectGlassDesign();
@@ -385,7 +510,8 @@ export class UiDock {
   protected readonly items = contentChildren(itemType());
   protected readonly action = contentChild(actionType());
   protected readonly accessory = contentChild(accessoryType());
-  protected readonly restore = viewChild<ElementRef>('restore');
+  protected readonly searchField = contentChild(searchFieldType());
+  protected readonly restoreButton = viewChild<ElementRef>('restore');
 
   /**
    * The dock's width, from Lynx's layout. The glass bar shrinks from it when
@@ -398,20 +524,93 @@ export class UiDock {
     this.items().find((item) => item.active()),
   );
 
+  /**
+   * The item selected last, which stays while the search's route is active
+   * and no item is: the glass bar's button goes back to it. Kept by an
+   * effect rather than a linkedSignal, which would only see the items
+   * selected while something read it.
+   */
+  readonly #lastItem = signal<UiDockItem | undefined>(undefined);
+  protected readonly rememberItem = effect(() => {
+    const item = this.selectedItem();
+    if (item) this.#lastItem.set(item);
+  });
+
+  /**
+   * Whether the search field is open: with a search field and an action in
+   * the dock, while the action's route is active, or while UiDockState says
+   * so for an action without one.
+   */
+  readonly searching = computed(() => {
+    const action = this.action();
+    return (
+      !!this.searchField() &&
+      !!action &&
+      (action.active() || this.#state.searching())
+    );
+  });
+
   /**
    * Whether the dock is minimized now: as UiDockState says, in the designs
-   * that minimize, once the dock knows the width it shrinks from.
+   * that minimize, once the dock knows the width it shrinks from, and not
+   * while it searches.
    */
   readonly minimized = computed(
     () =>
       this.#state.minimized() &&
       this.design() !== 'frosted' &&
-      this.width() > 0,
+      this.width() > 0 &&
+      !this.searching(),
+  );
+
+  /** The glass dock searching: its bar shrinks to a button beside the field. */
+  readonly #glassSearch = computed(
+    () => this.searching() && this.design() === 'glass' && this.width() > 0,
+  );
+
+  /** Whether the bar is one button: minimized, or beside the glass search. */
+  protected readonly barCollapsed = computed(
+    () => this.minimized() || this.#glassSearch(),
+  );
+
+  /**
+   * Whether the bar's items are out of sight: in a collapsed bar, or in
+   * Material's toolbar while it's slid away for the search bar.
+   */
+  protected readonly rowHidden = computed(
+    () =>
+      this.barCollapsed() || (this.searching() && this.design() === 'material'),
+  );
+
+  /**
+   * The glass and Material action is the field's while it searches: it
+   * shrinks into the field's end, and its icon fades out on the way.
+   */
+  readonly actionHidden = computed(
+    () => this.searching() && this.design() !== 'frosted',
+  );
+
+  /** The item the collapsed bar shows, and goes back to while searching. */
+  protected readonly restoreItem = computed(() =>
+    this.#glassSearch() ? this.#lastItem() : this.selectedItem(),
+  );
+
+  /** Whether the field's Cancel shows, beside it on glass. */
+  protected readonly cancelShown = computed(
+    () => this.searching() && !!this.searchField()?.cancelShown(),
   );
 
   /** No sliding, shrinking or fading under Reduce Motion. */
   readonly #animate = computed(() => !this.#settings.reduceMotion());
 
+  /**
+   * How far up the keyboard reaches into the dock, from its bottom edge, in
+   * px: 0 while it's down, or while the search field doesn't have it.
+   */
+  readonly #keyboardOverlap = signal(0);
+  /** Each keyboard change's measuring, so a late answer can't win. */
+  #measuring = 0;
+
   protected readonly hostClass = computed(() =>
     cn(
       'flex-col flex absolute bottom-0 left-0 right-0',
@@ -420,6 +619,24 @@ export class UiDock {
     ),
   );
 
+  /**
+   * While the search field has the keyboard, the dock floats above it: the
+   * glass and Material shapes a little above it, as they float above the home
+   * indicator, and the field's bar before iOS 26 on top of it, with the tab
+   * bar under the keyboard, as Safari's bar did.
+   */
+  protected readonly keyboardPadding = computed(() => {
+    const overlap = this.searching() ? this.#keyboardOverlap() : 0;
+    if (overlap <= 0) return null;
+    return this.design() === 'frosted'
+      ? `calc(${overlap - this.look().bar}px - env(safe-area-inset-bottom))`
+      : px(overlap + KEYBOARD_GAP);
+  });
+
+  protected readonly keyboardTransition = computed(() =>
+    this.searchField() && this.#animate() ? KEYBOARD_TRANSITION : null,
+  );
+
   protected readonly accessoryRadius = computed(() =>
     this.design() === 'frosted' ? FROSTED_ACCESSORY_RADIUS : this.look().radius,
   );
@@ -428,20 +645,44 @@ export class UiDock {
    * Each shape's frame in the dock, bottom up, and the dock's height. The
    * shapes are positioned absolutely, so a minimized dock can move each one
    * on its own: the accessory from above the bar into the row beside it.
+   *
+   * The search field's shape and its Cancel are there only with a search
+   * field. Closed, they're points inside the action, which they grow out of
+   * as the search opens.
    */
   protected readonly frames = computed(() => {
     const look = this.look();
     const design = this.design();
     const hasAction = !!this.action();
     const minimized = this.minimized();
+    const searching = this.searching();
+    const width = this.width();
     const transition = this.#animate() ? FRAME_TRANSITION : 'none';
     const actionSpace = hasAction ? look.action + look.gap : 0;
+    /**
+     * A point, a shape with no size, `right` and `bottom` px in.
+     */
+    const point = (right: number, bottom: number) => ({
+      left: px(Math.max(0, width - right)),
+      right: px(right),
+      bottom: px(bottom),
+      height: '0px',
+      transition,
+    });
 
     if (design === 'frosted') {
       const above = look.bar + look.gap;
+      const strip = searching ? FROSTED_SEARCH_HEIGHT : 0;
+      // Only with a search field, so the dock moves as it did without one.
+      const searchTransition = this.searchField() ? transition : undefined;
       return {
         stage: {
-          height: abovePx(this.accessory() ? above + look.accessory : look.bar),
+          height: abovePx(
+            this.accessory()
+              ? above + strip + look.accessory
+              : look.bar + strip,
+          ),
+          transition: searchTransition,
         },
         bar: {
           left: '0px',
@@ -458,49 +699,107 @@ export class UiDock {
         accessory: {
           left: px(FROSTED_ACCESSORY_INSET),
           right: px(FROSTED_ACCESSORY_INSET),
-          bottom: abovePx(above),
+          bottom: abovePx(above + strip),
           height: px(look.accessory),
+          transition: searchTransition,
+        },
+        // A bar on the tab bar's material, above it.
+        search: {
+          left: '0px',
+          right: '0px',
+          bottom: abovePx(look.bar),
+          height: px(strip),
+          transition,
         },
+        cancel: point(0, 0),
       };
     }
 
-    if (design === 'glass' && minimized) {
+    if (design === 'glass' && (minimized || this.#glassSearch())) {
       const size = MINIMIZED_SIZE;
       const besideAction = hasAction ? size + look.gap : 0;
+      const cancel = this.cancelShown();
+      const cancelSpace = cancel ? GLASS_SEARCH_SIZE + look.gap : 0;
+      const accessoryHeight = this.accessory() ? look.gap + look.accessory : 0;
       return {
-        stage: { height: px(size), transition },
-        bar: {
-          left: '0px',
-          right: px(this.width() - size),
-          bottom: '0px',
-          height: px(size),
-          transition,
-        },
-        action: {
-          right: '0px',
-          bottom: '0px',
-          width: px(size),
-          height: px(size),
+        stage: {
+          height: px(searching ? size + accessoryHeight : size),
           transition,
         },
-        accessory: {
-          left: px(size + look.gap),
-          right: px(besideAction),
+        bar: {
+          left: '0px',
+          right: px(width - size),
           bottom: '0px',
           height: px(size),
           transition,
         },
+        // Searching, the action shrinks into the end of the field, which
+        // grows out of it.
+        action: searching
+          ? {
+              right: px(cancelSpace + size / 2),
+              bottom: px(size / 2),
+              width: '0px',
+              height: '0px',
+              transition,
+            }
+          : {
+              right: '0px',
+              bottom: '0px',
+              width: px(size),
+              height: px(size),
+              transition,
+            },
+        // Minimized, the accessory moves down between the bar and the
+        // action; searching, it stays above the field.
+        accessory: searching
+          ? {
+              left: '0px',
+              right: '0px',
+              bottom: px(size + look.gap),
+              height: px(look.accessory),
+              transition,
+            }
+          : {
+              left: px(size + look.gap),
+              right: px(besideAction),
+              bottom: '0px',
+              height: px(size),
+              transition,
+            },
+        search: searching
+          ? {
+              left: px(size + look.gap),
+              right: px(cancelSpace),
+              bottom: '0px',
+              height: px(GLASS_SEARCH_SIZE),
+              transition,
+            }
+          : point(size / 2, size / 2),
+        cancel: cancel
+          ? {
+              left: px(width - GLASS_SEARCH_SIZE),
+              right: '0px',
+              bottom: '0px',
+              height: px(GLASS_SEARCH_SIZE),
+              transition,
+            }
+          : point(searching ? 0 : size / 2, size / 2),
       };
     }
 
-    // Glass or Material, expanded; or Material minimized, which slides the
-    // toolbar and the accessory below the screen and keeps the button.
-    const hidden = design === 'material' && minimized;
+    // Glass or Material, expanded; or Material minimized or searching, which
+    // slides the toolbar and the accessory below the screen. Minimized, it
+    // keeps the button; searching, the button grows into the search bar.
+    const hidden = design === 'material' && (minimized || searching);
     const slide = (by: number) =>
       design === 'material' ? `translateY(${hidden ? by : 0}px)` : null;
     const withAccessory = this.accessory()
       ? look.bar + look.gap + look.accessory
       : look.bar;
+    const actionCenter = point(look.action / 2, look.bar / 2);
+    // Material's button is shorter than the toolbar, and centered on it.
+    const actionBottom = (look.bar - look.action) / 2;
     return {
       stage: { height: px(withAccessory), transition },
       bar: {
@@ -511,14 +810,22 @@ export class UiDock {
         transform: slide(look.bar + MATERIAL_HIDDEN_OFFSET),
         transition,
       },
-      action: {
-        right: '0px',
-        // Material's button is shorter than the toolbar, and centered on it.
-        bottom: px((look.bar - look.action) / 2),
-        width: px(look.action),
-        height: px(look.action),
-        transition,
-      },
+      action:
+        design === 'material' && searching
+          ? {
+              right: px(look.action / 2),
+              bottom: px(look.bar / 2),
+              width: '0px',
+              height: '0px',
+              transition,
+            }
+          : {
+              right: '0px',
+              bottom: px(actionBottom),
+              width: px(look.action),
+              height: px(look.action),
+              transition,
+            },
       accessory: {
         left: '0px',
         right: '0px',
@@ -527,6 +834,17 @@ export class UiDock {
         transform: slide(withAccessory + MATERIAL_HIDDEN_OFFSET),
         transition,
       },
+      search:
+        design === 'material' && searching
+          ? {
+              left: '0px',
+              right: '0px',
+              bottom: px((look.bar - MATERIAL_SEARCH_HEIGHT) / 2),
+              height: px(MATERIAL_SEARCH_HEIGHT),
+              transition,
+            }
+          : actionCenter,
+      cancel: actionCenter,
     };
   });
 
@@ -551,6 +869,43 @@ export class UiDock {
     this.design() === 'material' ? 'var(--primary)' : undefined,
   );
 
+  /**
+   * A capsule on glass and Material, as iOS 26's field and Material 3's
+   * search bar are; before iOS 26, a bar from edge to edge.
+   */
+  protected readonly searchShape = computed(() =>
+    this.design() === 'frosted' ? 'rounded' : 'capsule',
+  );
+
+  protected readonly searchContentClass = computed(() =>
+    cn(
+      'flex-1 flex-row items-center flex',
+      this.design() === 'frosted' && 'px-[8px]',
+    ),
+  );
+
+  /**
+   * The field's content fades in once its shape has mostly grown, and out at
+   * once as the search closes.
+   */
+  protected readonly searchContentStyle = computed(() => {
+    const searching = this.searching();
+    return {
+      opacity: searching ? '1' : '0',
+      transition: searching && this.#animate() ? SEARCH_IN_TRANSITION : 'none',
+    };
+  });
+
+  protected readonly cancelIcon = computed(() =>
+    iconSvg('x', this.#resolveColor('var(--glass-foreground)')),
+  );
+
+  protected readonly cancelIconStyle = computed(() => ({
+    width: '20px',
+    height: '20px',
+    opacity: this.cancelShown() ? '1' : '0',
+  }));
+
   protected readonly rowClass = computed(() =>
     cn(
       'flex-row flex relative',
@@ -566,15 +921,15 @@ export class UiDock {
    */
   protected readonly rowStyle = computed(() => {
     const look = this.look();
-    const minimized = this.minimized();
+    const hidden = this.rowHidden();
     const action = this.action() ? look.action + look.gap : 0;
     const floating = this.design() !== 'frosted' && this.width() > 0;
     return {
       margin: px(look.inset),
       width: floating ? px(this.width() - action - 2 * look.inset) : null,
-      opacity: minimized ? '0' : '1',
+      opacity: hidden ? '0' : '1',
       transition: this.#animate()
-        ? minimized
+        ? hidden
           ? ROW_OUT_TRANSITION
           : ROW_IN_TRANSITION
         : 'none',
@@ -605,22 +960,60 @@ export class UiDock {
     };
   });
 
-  /** The selected item's icon, or the first item's, for the minimized bar. */
+  /**
+   * The icon of the collapsed bar's item (see restoreItem), or the first
+   * item's.
+   */
   protected readonly minimizedIcon = computed(() => {
-    const item = this.selectedItem() ?? this.items()[0];
+    const item = this.restoreItem() ?? this.items()[0];
     return item
       ? iconSvg(item.icon(), this.#resolveColor('var(--primary)'))
       : '';
   });
 
-  // The minimized bar's icon fades in as the bar shrinks around it.
+  // The collapsed bar's icon fades in as the bar shrinks around it.
   protected readonly restoreEntrance = effect(() => {
-    const restore = this.restore();
+    const restore = this.restoreButton();
     if (restore && untracked(this.#animate)) {
       fadeIn(restore.nativeElement, { duration: DURATION.slow });
     }
   });
 
+  /** Whether the dock searched when it last checked, to see it close. */
+  #wasSearching = false;
+
+  // A search that closes, by its route or by the app, takes the keyboard
+  // with it.
+  protected readonly closeKeyboard = effect(() => {
+    const searching = this.searching();
+    if (this.#wasSearching && !searching) {
+      untracked(() => this.searchField()?.blur());
+    }
+    this.#wasSearching = searching;
+  });
+
+  // The search field's keyboard height says the keyboard moved: measure how
+  // far it reaches into the dock, which floats above it while it searches.
+  protected readonly followKeyboard = effect(() => {
+    const height = this.searchField()?.keyboardHeight() ?? 0;
+    const measuring = ++this.#measuring;
+    const screen = height > 0 ? keyboardScreen(this.#injector) : null;
+    if (!screen) {
+      this.#keyboardOverlap.set(0);
+      return;
+    }
+    // The dock's host sits at the bottom of the screen whatever its padding,
+    // so measuring it gives the same answer however far the dock has risen.
+    measureForKeyboard(this.#renderer, this.#host.nativeElement).then(
+      (measured) => {
+        if (measuring !== this.#measuring || !measured) return;
+        this.#keyboardOverlap.set(
+          keyboardLift(measured.element, measured.page, height, screen, 0),
+        );
+      },
+    );
+  });
+
   protected measure(event: Event): void {
     this.width.set((event as LayoutChangeEvent).detail.width);
   }
@@ -631,6 +1024,55 @@ export class UiDock {
   expand(): void {
     this.#state.minimized.set(false);
   }
+
+  /**
+   * Opens the search field and gives it the keyboard, as pressing an action
+   * without a route does.
+   */
+  openSearch(): void {
+    const field = this.searchField();
+    if (!field) return;
+    this.#state.searching.set(true);
+    field.focus();
+  }
+
+  /**
+   * Closes the search field: goes back to the last item while the search's
+   * route is active, or else closes the search UiDockState holds open.
+   */
+  closeSearch(): void {
+    if (this.action()?.active()) {
+      (this.#lastItem() ?? this.items()[0])?.navigate();
+    }
+    this.#state.searching.set(false);
+  }
+
+  /**
+   * Cancel closes the search, except that the search tab of iOS stays open
+   * with its suggestions: there, Cancel clears the field and closes the
+   * keyboard, and the bar's button goes back. Material's back arrow always
+   * goes back.
+   */
+  searchCanceled(): void {
+    if (this.design() === 'material' || !this.action()?.active()) {
+      this.closeSearch();
+    }
+  }
+
+  /**
+   * The action was pressed: one without a route opens the search.
+   */
+  actionPressed(routed: boolean): void {
+    if (!routed) this.openSearch();
+  }
+
+  protected onRestore(): void {
+    if (this.searching()) {
+      this.closeSearch();
+    } else {
+      this.expand();
+    }
+  }
 }
 
 /**
@@ -749,6 +1191,7 @@ export class UiDockItem {
   // The host, not an inner view, shrinks on a press: it's the whole tap
   // target, and injecting it needs no view query.
   readonly #host = inject(ElementRef);
+  readonly #link = inject(RouterLink);
   #pressAnim?: AnimationHandle;
 
   protected readonly design = this.#dock.design;
@@ -846,6 +1289,14 @@ export class UiDockItem {
     ),
   );
 
+  /**
+   * Navigates to the item's route, with its RouterLink options, as a tap
+   * does: the glass dock's collapsed bar goes back to it from the search.
+   */
+  navigate(): void {
+    this.#link.onClick(0, false, false, false, false);
+  }
+
   protected onPressStart(): void {
     this.#pressAnim?.cancel();
     this.#pressAnim = pressDown(this.#host.nativeElement);
@@ -871,6 +1322,8 @@ export class UiDockItem {
  * <ui-dock-action route="/search" icon="search" label="Search" />
  * <ui-dock-action icon="plus" label="New message" (pressed)="compose()" />
  * ```
+ *
+ * With a `<ui-search-field>` in the dock, it opens the search (see UiDock).
  */
 @Component({
   selector: 'ui-dock-action',
@@ -907,7 +1360,11 @@ export class UiDockItem {
     '(bindtouchcancel)': 'onPressEnd()',
     '(bindmouseup)': 'onPressEnd()',
     '(bindmouseleave)': 'onPressEnd()',
-    '(bindtap)': 'pressed.emit()',
+    '(bindtap)': 'onTap()',
+    // Its icon fades while the button shrinks into the search field, so it
+    // doesn't show through the field's glass. The content, not the glass.
+    '[style.opacity]': 'fade().opacity',
+    '[style.transition]': 'fade().transition',
   },
   template: `<svg
     [attr.content]="iconSvg()"
@@ -923,8 +1380,10 @@ export class UiDockAction {
   readonly pressed = output<void>();
 
   readonly #dock = inject(UiDock);
+  readonly #settings = inject(LynxAccessibilitySettings);
   readonly #resolveColor = injectIconColor();
   readonly #host = inject(ElementRef);
+  readonly #link = inject(RouterLink);
   #pressAnim?: AnimationHandle;
 
   /** Whether the button's route is active, as for UiDockItem.active. */
@@ -948,6 +1407,25 @@ export class UiDockAction {
     return iconSvg(this.icon(), this.#resolveColor(color));
   });
 
+  protected readonly fade = computed(() => {
+    const hidden = this.#dock.actionHidden();
+    return {
+      opacity: hidden ? '0' : null,
+      transition:
+        hidden && !this.#settings.reduceMotion() ? ICON_OUT_TRANSITION : null,
+    };
+  });
+
+  /**
+   * RouterLink navigates on the same tap through its own listener, when the
+   * button has a route: one without a route opens the dock's search, if it
+   * has one.
+   */
+  protected onTap(): void {
+    this.pressed.emit();
+    this.#dock.actionPressed(this.#link.urlTree !== null);
+  }
+
   protected onPressStart(): void {
     this.#pressAnim?.cancel();
     this.#pressAnim = pressDown(this.#host.nativeElement);