diff --git a/.design-sync/config.json b/.design-sync/config.json
index 46df2b8d8a..a9e5b32b3b 100644
--- a/.design-sync/config.json
+++ b/.design-sync/config.json
@@ -59,7 +59,7 @@
     "SearchField": "about?: string; accept?: string; accessKey?: string; alt?: string; \"aria-activedescendant\"?: string; \"aria-atomic\"?: (boolean | \"true\" | \"false\"); \"aria-autocomplete\"?: \"none\" | \"list\" | \"inline\" | \"both\"; \"aria-braillelabel\"?: string; \"aria-brailleroledescription\"?: string; \"aria-busy\"?: (boolean | \"true\" | \"false\"); \"aria-checked\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-colcount\"?: number; \"aria-colindex\"?: number; \"aria-colindextext\"?: string; \"aria-colspan\"?: number; \"aria-controls\"?: string; \"aria-current\"?: boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"; \"aria-describedby\"?: string; \"aria-description\"?: string; \"aria-details\"?: string; \"aria-disabled\"?: (boolean | \"true\" | \"false\"); \"aria-dropeffect\"?: \"none\" | \"link\" | \"copy\" | \"execute\" | \"move\" | \"popup\"; \"aria-errormessage\"?: string; \"aria-expanded\"?: (boolean | \"true\" | \"false\"); \"aria-flowto\"?: string; \"aria-grabbed\"?: (boolean | \"true\" | \"false\"); \"aria-haspopup\"?: boolean | \"true\" | \"false\" | \"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"; \"aria-hidden\"?: (boolean | \"true\" | \"false\"); \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"; \"aria-keyshortcuts\"?: string; \"aria-label\"?: string; \"aria-labelledby\"?: string; \"aria-level\"?: number; \"aria-live\"?: \"off\" | \"assertive\" | \"polite\"; \"aria-modal\"?: (boolean | \"true\" | \"false\"); \"aria-multiline\"?: (boolean | \"true\" | \"false\"); \"aria-multiselectable\"?: (boolean | \"true\" | \"false\"); \"aria-orientation\"?: \"horizontal\" | \"vertical\"; \"aria-owns\"?: string; \"aria-placeholder\"?: string; \"aria-posinset\"?: number; \"aria-pressed\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-readonly\"?: (boolean | \"true\" | \"false\"); \"aria-relevant\"?: \"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"; \"aria-required\"?: (boolean | \"true\" | \"false\"); \"aria-roledescription\"?: string; \"aria-rowcount\"?: number; \"aria-rowindex\"?: number; \"aria-rowindextext\"?: string; \"aria-rowspan\"?: number; \"aria-selected\"?: (boolean | \"true\" | \"false\"); \"aria-setsize\"?: number; \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\"; \"aria-valuemax\"?: number; \"aria-valuemin\"?: number; \"aria-valuenow\"?: number; \"aria-valuetext\"?: string; autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}); autoComplete?: import(\"react\").HTMLInputAutoCompleteAttribute; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; capture?: boolean | \"user\" | \"environment\"; checked?: boolean; children?: import(\"react\").ReactNode; className?: string; clearLabel?: string; color?: string; content?: string; contentEditable?: (boolean | \"true\" | \"false\") | \"inherit\" | \"plaintext-only\"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; disabled?: boolean; draggable?: (boolean | \"true\" | \"false\"); enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"; error?: string; exportparts?: string; fieldClassName?: string; form?: string; formAction?: string | ((formData: FormData) => void | Promise<void>); formEncType?: string; formMethod?: string; formNoValidate?: boolean; formTarget?: string; height?: string | number; hidden?: boolean; hideLabel?: boolean; hint?: string; id?: string; inert?: boolean; inlist?: any; inputMode?: \"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; label: string; lang?: string; list?: string; max?: string | number; maxLength?: number; min?: string | number; minLength?: number; multiple?: boolean; name?: string; nonce?: string; onAbort?: import(\"react\").ReactEventHandler<HTMLInputElement>; onAbortCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onAnimationEnd?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationEndCapture?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationIteration?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationIterationCapture?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationStart?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAnimationStartCapture?: import(\"react\").AnimationEventHandler<HTMLInputElement>; onAuxClick?: import(\"react\").MouseEventHandler<HTMLInputElement>; onAuxClickCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onBeforeInput?: import(\"react\").InputEventHandler<HTMLInputElement>; onBeforeInputCapture?: import(\"react\").InputEventHandler<HTMLInputElement>; onBeforeToggle?: import(\"react\").ToggleEventHandler<HTMLInputElement>; onBlur?: import(\"react\").FocusEventHandler<HTMLInputElement>; onBlurCapture?: import(\"react\").FocusEventHandler<HTMLInputElement>; onCanPlay?: import(\"react\").ReactEventHandler<HTMLInputElement>; onCanPlayCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onCanPlayThrough?: import(\"react\").ReactEventHandler<HTMLInputElement>; onCanPlayThroughCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onChange?: import(\"react\").ChangeEventHandler<HTMLInputElement, HTMLInputElement>; onChangeCapture?: import(\"react\").ChangeEventHandler<HTMLInputElement, Element>; onClear?: (() => void); onClick?: import(\"react\").MouseEventHandler<HTMLInputElement>; onClickCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onCompositionEnd?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionEndCapture?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionStart?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionStartCapture?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionUpdate?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onCompositionUpdateCapture?: import(\"react\").CompositionEventHandler<HTMLInputElement>; onContextMenu?: import(\"react\").MouseEventHandler<HTMLInputElement>; onContextMenuCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onCopy?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onCopyCapture?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onCut?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onCutCapture?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onDoubleClick?: import(\"react\").MouseEventHandler<HTMLInputElement>; onDoubleClickCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onDrag?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEnd?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEndCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEnter?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragEnterCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragExit?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragExitCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragLeave?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragLeaveCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragOver?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragOverCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragStart?: import(\"react\").DragEventHandler<HTMLInputElement>; onDragStartCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDrop?: import(\"react\").DragEventHandler<HTMLInputElement>; onDropCapture?: import(\"react\").DragEventHandler<HTMLInputElement>; onDurationChange?: import(\"react\").ReactEventHandler<HTMLInputElement>; onDurationChangeCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEmptied?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEmptiedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEncrypted?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEncryptedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEnded?: import(\"react\").ReactEventHandler<HTMLInputElement>; onEndedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onError?: import(\"react\").ReactEventHandler<HTMLInputElement>; onErrorCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onFocus?: import(\"react\").FocusEventHandler<HTMLInputElement>; onFocusCapture?: import(\"react\").FocusEventHandler<HTMLInputElement>; onGotPointerCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onGotPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onInput?: import(\"react\").InputEventHandler<HTMLInputElement>; onInputCapture?: import(\"react\").InputEventHandler<HTMLInputElement>; onInvalid?: import(\"react\").ReactEventHandler<HTMLInputElement>; onInvalidCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onKeyDown?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyDownCapture?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyPress?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyPressCapture?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyUp?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onKeyUpCapture?: import(\"react\").KeyboardEventHandler<HTMLInputElement>; onLoad?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedData?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedDataCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedMetadata?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadedMetadataCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadStart?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLoadStartCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onLostPointerCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onLostPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onMouseDown?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseDownCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseEnter?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseLeave?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseMove?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseMoveCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOut?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOutCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOver?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseOverCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseUp?: import(\"react\").MouseEventHandler<HTMLInputElement>; onMouseUpCapture?: import(\"react\").MouseEventHandler<HTMLInputElement>; onPaste?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onPasteCapture?: import(\"react\").ClipboardEventHandler<HTMLInputElement>; onPause?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPauseCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlay?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlayCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlaying?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPlayingCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onPointerCancel?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerCancelCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerDown?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerDownCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerEnter?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerLeave?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerMove?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerMoveCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOut?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOutCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOver?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerOverCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerUp?: import(\"react\").PointerEventHandler<HTMLInputElement>; onPointerUpCapture?: import(\"react\").PointerEventHandler<HTMLInputElement>; onProgress?: import(\"react\").ReactEventHandler<HTMLInputElement>; onProgressCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onRateChange?: import(\"react\").ReactEventHandler<HTMLInputElement>; onRateChangeCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onReset?: import(\"react\").ReactEventHandler<HTMLInputElement>; onResetCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onScroll?: import(\"react\").UIEventHandler<HTMLInputElement>; onScrollCapture?: import(\"react\").UIEventHandler<HTMLInputElement>; onScrollEnd?: import(\"react\").UIEventHandler<HTMLInputElement>; onScrollEndCapture?: import(\"react\").UIEventHandler<HTMLInputElement>; onSeeked?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSeekedCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSeeking?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSeekingCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSelect?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSelectCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onStalled?: import(\"react\").ReactEventHandler<HTMLInputElement>; onStalledCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSubmit?: import(\"react\").SubmitEventHandler<HTMLInputElement>; onSubmitCapture?: import(\"react\").SubmitEventHandler<HTMLInputElement>; onSuspend?: import(\"react\").ReactEventHandler<HTMLInputElement>; onSuspendCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onTimeUpdate?: import(\"react\").ReactEventHandler<HTMLInputElement>; onTimeUpdateCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onToggle?: import(\"react\").ToggleEventHandler<HTMLInputElement>; onTouchCancel?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchCancelCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchEnd?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchEndCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchMove?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchMoveCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchStart?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTouchStartCapture?: import(\"react\").TouchEventHandler<HTMLInputElement>; onTransitionCancel?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionCancelCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionEnd?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionEndCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionRun?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionRunCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionStart?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onTransitionStartCapture?: import(\"react\").TransitionEventHandler<HTMLInputElement>; onVolumeChange?: import(\"react\").ReactEventHandler<HTMLInputElement>; onVolumeChangeCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onWaiting?: import(\"react\").ReactEventHandler<HTMLInputElement>; onWaitingCapture?: import(\"react\").ReactEventHandler<HTMLInputElement>; onWheel?: import(\"react\").WheelEventHandler<HTMLInputElement>; onWheelCapture?: import(\"react\").WheelEventHandler<HTMLInputElement>; part?: string; pattern?: string; placeholder?: string; popover?: \"\" | \"auto\" | \"manual\" | \"hint\"; popoverTarget?: string; popoverTargetAction?: \"toggle\" | \"show\" | \"hide\"; prefix?: string; property?: string; radioGroup?: string; readOnly?: boolean; ref?: Ref<HTMLInputElement>; rel?: string; required?: boolean; resource?: string; results?: number; rev?: string; role?: import(\"react\").AriaRole; security?: string; size?: number; slot?: string; spellCheck?: (boolean | \"true\" | \"false\"); src?: string; step?: string | number; style?: import(\"react\").CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; title?: string; translate?: \"yes\" | \"no\"; typeof?: string; unselectable?: \"off\" | \"on\"; value?: string | number | readonly string[]; vocab?: string; width?: string | number;",
     "SegmentedControl": "ariaControls?: string; ariaDescribedBy?: string; ariaLabelledBy?: string; className?: string; label?: string; layout?: \"fit\" | \"equal\"; onChange: (value: string) => void; options: readonly SegmentedControlOption<string>[]; value: string;",
     "Select": "about?: string; accessKey?: string; \"aria-activedescendant\"?: string; \"aria-atomic\"?: (boolean | \"true\" | \"false\"); \"aria-autocomplete\"?: \"none\" | \"list\" | \"inline\" | \"both\"; \"aria-braillelabel\"?: string; \"aria-brailleroledescription\"?: string; \"aria-busy\"?: (boolean | \"true\" | \"false\"); \"aria-checked\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-colcount\"?: number; \"aria-colindex\"?: number; \"aria-colindextext\"?: string; \"aria-colspan\"?: number; \"aria-controls\"?: string; \"aria-current\"?: boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"; \"aria-describedby\"?: string; \"aria-description\"?: string; \"aria-details\"?: string; \"aria-disabled\"?: (boolean | \"true\" | \"false\"); \"aria-dropeffect\"?: \"none\" | \"link\" | \"copy\" | \"execute\" | \"move\" | \"popup\"; \"aria-errormessage\"?: string; \"aria-expanded\"?: (boolean | \"true\" | \"false\"); \"aria-flowto\"?: string; \"aria-grabbed\"?: (boolean | \"true\" | \"false\"); \"aria-haspopup\"?: boolean | \"true\" | \"false\" | \"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"; \"aria-hidden\"?: (boolean | \"true\" | \"false\"); \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"; \"aria-keyshortcuts\"?: string; \"aria-label\"?: string; \"aria-labelledby\"?: string; \"aria-level\"?: number; \"aria-live\"?: \"off\" | \"assertive\" | \"polite\"; \"aria-modal\"?: (boolean | \"true\" | \"false\"); \"aria-multiline\"?: (boolean | \"true\" | \"false\"); \"aria-multiselectable\"?: (boolean | \"true\" | \"false\"); \"aria-orientation\"?: \"horizontal\" | \"vertical\"; \"aria-owns\"?: string; \"aria-placeholder\"?: string; \"aria-posinset\"?: number; \"aria-pressed\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-readonly\"?: (boolean | \"true\" | \"false\"); \"aria-relevant\"?: \"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"; \"aria-required\"?: (boolean | \"true\" | \"false\"); \"aria-roledescription\"?: string; \"aria-rowcount\"?: number; \"aria-rowindex\"?: number; \"aria-rowindextext\"?: string; \"aria-rowspan\"?: number; \"aria-selected\"?: (boolean | \"true\" | \"false\"); \"aria-setsize\"?: number; \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\"; \"aria-valuemax\"?: number; \"aria-valuemin\"?: number; \"aria-valuenow\"?: number; \"aria-valuetext\"?: string; autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}); autoComplete?: string; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; className?: string; color?: string; content?: string; contentEditable?: (boolean | \"true\" | \"false\") | \"inherit\" | \"plaintext-only\"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; disabled?: boolean; draggable?: (boolean | \"true\" | \"false\"); enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"; error?: string; exportparts?: string; fieldClassName?: string; form?: string; hidden?: boolean; hideLabel?: boolean; hint?: string; id?: string; inert?: boolean; inlist?: any; inputMode?: \"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; label: string; lang?: string; multiple?: boolean; name?: string; nonce?: string; onAbort?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onAbortCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onAnimationEnd?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationEndCapture?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationIteration?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationIterationCapture?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationStart?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAnimationStartCapture?: import(\"react\").AnimationEventHandler<HTMLSelectElement>; onAuxClick?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onAuxClickCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onBeforeInput?: import(\"react\").InputEventHandler<HTMLSelectElement>; onBeforeInputCapture?: import(\"react\").InputEventHandler<HTMLSelectElement>; onBeforeToggle?: import(\"react\").ToggleEventHandler<HTMLSelectElement>; onBlur?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onBlurCapture?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onCanPlay?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onCanPlayCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onCanPlayThrough?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onCanPlayThroughCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onChange?: import(\"react\").ChangeEventHandler<HTMLSelectElement, HTMLSelectElement>; onChangeCapture?: import(\"react\").ChangeEventHandler<HTMLSelectElement, Element>; onClick?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onClickCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onCompositionEnd?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionEndCapture?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionStart?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionStartCapture?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionUpdate?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onCompositionUpdateCapture?: import(\"react\").CompositionEventHandler<HTMLSelectElement>; onContextMenu?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onContextMenuCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onCopy?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onCopyCapture?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onCut?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onCutCapture?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onDoubleClick?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onDoubleClickCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onDrag?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEnd?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEndCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEnter?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragEnterCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragExit?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragExitCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragLeave?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragLeaveCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragOver?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragOverCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragStart?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDragStartCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDrop?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDropCapture?: import(\"react\").DragEventHandler<HTMLSelectElement>; onDurationChange?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onDurationChangeCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEmptied?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEmptiedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEncrypted?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEncryptedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEnded?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onEndedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onError?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onErrorCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onFocus?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onFocusCapture?: import(\"react\").FocusEventHandler<HTMLSelectElement>; onGotPointerCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onGotPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onInput?: import(\"react\").InputEventHandler<HTMLSelectElement>; onInputCapture?: import(\"react\").InputEventHandler<HTMLSelectElement>; onInvalid?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onInvalidCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onKeyDown?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyDownCapture?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyPress?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyPressCapture?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyUp?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onKeyUpCapture?: import(\"react\").KeyboardEventHandler<HTMLSelectElement>; onLoad?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedData?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedDataCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedMetadata?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadedMetadataCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadStart?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLoadStartCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onLostPointerCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onLostPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onMouseDown?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseDownCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseEnter?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseLeave?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseMove?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseMoveCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOut?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOutCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOver?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseOverCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseUp?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onMouseUpCapture?: import(\"react\").MouseEventHandler<HTMLSelectElement>; onPaste?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onPasteCapture?: import(\"react\").ClipboardEventHandler<HTMLSelectElement>; onPause?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPauseCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlay?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlayCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlaying?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPlayingCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onPointerCancel?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerCancelCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerDown?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerDownCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerEnter?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerLeave?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerMove?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerMoveCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOut?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOutCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOver?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerOverCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerUp?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onPointerUpCapture?: import(\"react\").PointerEventHandler<HTMLSelectElement>; onProgress?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onProgressCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onRateChange?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onRateChangeCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onReset?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onResetCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onScroll?: import(\"react\").UIEventHandler<HTMLSelectElement>; onScrollCapture?: import(\"react\").UIEventHandler<HTMLSelectElement>; onScrollEnd?: import(\"react\").UIEventHandler<HTMLSelectElement>; onScrollEndCapture?: import(\"react\").UIEventHandler<HTMLSelectElement>; onSeeked?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSeekedCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSeeking?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSeekingCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSelect?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSelectCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onStalled?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onStalledCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSubmit?: import(\"react\").SubmitEventHandler<HTMLSelectElement>; onSubmitCapture?: import(\"react\").SubmitEventHandler<HTMLSelectElement>; onSuspend?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onSuspendCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onTimeUpdate?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onTimeUpdateCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onToggle?: import(\"react\").ToggleEventHandler<HTMLSelectElement>; onTouchCancel?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchCancelCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchEnd?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchEndCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchMove?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchMoveCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchStart?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTouchStartCapture?: import(\"react\").TouchEventHandler<HTMLSelectElement>; onTransitionCancel?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionCancelCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionEnd?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionEndCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionRun?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionRunCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionStart?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onTransitionStartCapture?: import(\"react\").TransitionEventHandler<HTMLSelectElement>; onVolumeChange?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onVolumeChangeCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onWaiting?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onWaitingCapture?: import(\"react\").ReactEventHandler<HTMLSelectElement>; onWheel?: import(\"react\").WheelEventHandler<HTMLSelectElement>; onWheelCapture?: import(\"react\").WheelEventHandler<HTMLSelectElement>; options: SelectOption[]; part?: string; placeholder?: string; popover?: \"\" | \"auto\" | \"manual\" | \"hint\"; popoverTarget?: string; popoverTargetAction?: \"toggle\" | \"show\" | \"hide\"; prefix?: string; property?: string; radioGroup?: string; ref?: Ref<HTMLSelectElement>; rel?: string; required?: boolean; resource?: string; results?: number; rev?: string; role?: import(\"react\").AriaRole; security?: string; size?: number; slot?: string; spellCheck?: (boolean | \"true\" | \"false\"); style?: import(\"react\").CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; title?: string; translate?: \"yes\" | \"no\"; typeof?: string; unselectable?: \"off\" | \"on\"; value?: string | number | readonly string[]; vocab?: string;",
-    "Sheet": "ariaLabel?: string; bodyClassName?: string; bodyRef?: RefObject<HTMLDivElement | null>; children: ReactNode; closeButtonClassName?: string; closeLabel?: string; contentClassName?: string; contentStyle?: CSSProperties; description?: string; descriptionContent?: ReactNode; desktopBackdropClassName?: string; footer?: ReactNode; footerClassName?: string; headerActions?: ReactNode; headerClassName?: string; headerLeading?: ReactNode; id?: string; initialFocusRef?: RefObject<HTMLElement | null>; labelledBy?: string; mobileHeaderSafeArea?: SheetMobileHeaderSafeArea; mobilePlacement?: \"bottom\" | \"top\" | \"fullscreen\"; mobileSize?: SheetMobileSize; onBodyScroll?: UIEventHandler<HTMLDivElement>; onClose: () => void; open: boolean; placement?: \"default\" | \"left\"; portal?: boolean; resolveReturnFocusTarget?: (() => HTMLElement | null); returnFocusRef?: RefObject<HTMLElement | null>; testId?: string; title?: string; titleAccessory?: ReactNode; titleClassName?: string;",
+    "Sheet": "ariaLabel?: string; bodyClassName?: string; bodyRef?: RefObject<HTMLDivElement | null>; bodyTabIndex?: number; children: ReactNode; closeButtonClassName?: string; closeLabel?: string; contentClassName?: string; contentStyle?: CSSProperties; description?: string; descriptionContent?: ReactNode; desktopBackdropClassName?: string; footer?: ReactNode; footerClassName?: string; headerActions?: ReactNode; headerBottom?: ReactNode; headerClassName?: string; headerHidden?: boolean; headerLeading?: ReactNode; headerRef?: RefObject<HTMLDivElement | null>; id?: string; initialFocusRef?: RefObject<HTMLElement | null>; labelledBy?: string; mobileHeaderSafeArea?: SheetMobileHeaderSafeArea; mobilePlacement?: \"bottom\" | \"top\" | \"fullscreen\"; mobileSize?: SheetMobileSize; onBodyScroll?: UIEventHandler<HTMLDivElement>; onClose: () => void; open: boolean; placement?: \"default\" | \"left\"; portal?: boolean; resolveReturnFocusTarget?: (() => HTMLElement | null); returnFocusRef?: RefObject<HTMLElement | null>; testId?: string; title?: string; titleAccessory?: ReactNode; titleClassName?: string;",
     "Skeleton": "about?: string; accessKey?: string; animationDelay?: string; \"aria-activedescendant\"?: string; \"aria-atomic\"?: (boolean | \"true\" | \"false\"); \"aria-autocomplete\"?: \"none\" | \"list\" | \"inline\" | \"both\"; \"aria-braillelabel\"?: string; \"aria-brailleroledescription\"?: string; \"aria-busy\"?: (boolean | \"true\" | \"false\"); \"aria-checked\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-colcount\"?: number; \"aria-colindex\"?: number; \"aria-colindextext\"?: string; \"aria-colspan\"?: number; \"aria-controls\"?: string; \"aria-current\"?: boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\"; \"aria-describedby\"?: string; \"aria-description\"?: string; \"aria-details\"?: string; \"aria-disabled\"?: (boolean | \"true\" | \"false\"); \"aria-dropeffect\"?: \"none\" | \"link\" | \"copy\" | \"execute\" | \"move\" | \"popup\"; \"aria-errormessage\"?: string; \"aria-expanded\"?: (boolean | \"true\" | \"false\"); \"aria-flowto\"?: string; \"aria-grabbed\"?: (boolean | \"true\" | \"false\"); \"aria-haspopup\"?: boolean | \"true\" | \"false\" | \"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"; \"aria-hidden\"?: (boolean | \"true\" | \"false\"); \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"; \"aria-keyshortcuts\"?: string; \"aria-label\"?: string; \"aria-labelledby\"?: string; \"aria-level\"?: number; \"aria-live\"?: \"off\" | \"assertive\" | \"polite\"; \"aria-modal\"?: (boolean | \"true\" | \"false\"); \"aria-multiline\"?: (boolean | \"true\" | \"false\"); \"aria-multiselectable\"?: (boolean | \"true\" | \"false\"); \"aria-orientation\"?: \"horizontal\" | \"vertical\"; \"aria-owns\"?: string; \"aria-placeholder\"?: string; \"aria-posinset\"?: number; \"aria-pressed\"?: boolean | \"true\" | \"false\" | \"mixed\"; \"aria-readonly\"?: (boolean | \"true\" | \"false\"); \"aria-relevant\"?: \"text\" | \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text additions\" | \"text removals\"; \"aria-required\"?: (boolean | \"true\" | \"false\"); \"aria-roledescription\"?: string; \"aria-rowcount\"?: number; \"aria-rowindex\"?: number; \"aria-rowindextext\"?: string; \"aria-rowspan\"?: number; \"aria-selected\"?: (boolean | \"true\" | \"false\"); \"aria-setsize\"?: number; \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\"; \"aria-valuemax\"?: number; \"aria-valuemin\"?: number; \"aria-valuenow\"?: number; \"aria-valuetext\"?: string; autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}); autoCorrect?: string; autoFocus?: boolean; autoSave?: string; children?: ReactNode; className?: string; color?: string; content?: string; contentEditable?: (boolean | \"true\" | \"false\") | \"inherit\" | \"plaintext-only\"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; draggable?: (boolean | \"true\" | \"false\"); enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"; exportparts?: string; hidden?: boolean; id?: string; inert?: boolean; inlist?: any; inputMode?: \"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; lang?: string; nonce?: string; onAbort?: import(\"react\").ReactEventHandler<HTMLDivElement>; onAbortCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onAnimationEnd?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationEndCapture?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationIteration?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationIterationCapture?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationStart?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAnimationStartCapture?: import(\"react\").AnimationEventHandler<HTMLDivElement>; onAuxClick?: import(\"react\").MouseEventHandler<HTMLDivElement>; onAuxClickCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onBeforeInput?: import(\"react\").InputEventHandler<HTMLDivElement>; onBeforeInputCapture?: import(\"react\").InputEventHandler<HTMLDivElement>; onBeforeToggle?: import(\"react\").ToggleEventHandler<HTMLDivElement>; onBlur?: import(\"react\").FocusEventHandler<HTMLDivElement>; onBlurCapture?: import(\"react\").FocusEventHandler<HTMLDivElement>; onCanPlay?: import(\"react\").ReactEventHandler<HTMLDivElement>; onCanPlayCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onCanPlayThrough?: import(\"react\").ReactEventHandler<HTMLDivElement>; onCanPlayThroughCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onChange?: import(\"react\").ChangeEventHandler<HTMLDivElement, Element>; onChangeCapture?: import(\"react\").ChangeEventHandler<HTMLDivElement, Element>; onClick?: import(\"react\").MouseEventHandler<HTMLDivElement>; onClickCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onCompositionEnd?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionEndCapture?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionStart?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionStartCapture?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionUpdate?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onCompositionUpdateCapture?: import(\"react\").CompositionEventHandler<HTMLDivElement>; onContextMenu?: import(\"react\").MouseEventHandler<HTMLDivElement>; onContextMenuCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onCopy?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onCopyCapture?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onCut?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onCutCapture?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onDoubleClick?: import(\"react\").MouseEventHandler<HTMLDivElement>; onDoubleClickCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onDrag?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEnd?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEndCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEnter?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragEnterCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragExit?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragExitCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragLeave?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragLeaveCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragOver?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragOverCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragStart?: import(\"react\").DragEventHandler<HTMLDivElement>; onDragStartCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDrop?: import(\"react\").DragEventHandler<HTMLDivElement>; onDropCapture?: import(\"react\").DragEventHandler<HTMLDivElement>; onDurationChange?: import(\"react\").ReactEventHandler<HTMLDivElement>; onDurationChangeCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEmptied?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEmptiedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEncrypted?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEncryptedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEnded?: import(\"react\").ReactEventHandler<HTMLDivElement>; onEndedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onError?: import(\"react\").ReactEventHandler<HTMLDivElement>; onErrorCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onFocus?: import(\"react\").FocusEventHandler<HTMLDivElement>; onFocusCapture?: import(\"react\").FocusEventHandler<HTMLDivElement>; onGotPointerCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onGotPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onInput?: import(\"react\").InputEventHandler<HTMLDivElement>; onInputCapture?: import(\"react\").InputEventHandler<HTMLDivElement>; onInvalid?: import(\"react\").ReactEventHandler<HTMLDivElement>; onInvalidCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onKeyDown?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyDownCapture?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyPress?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyPressCapture?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyUp?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onKeyUpCapture?: import(\"react\").KeyboardEventHandler<HTMLDivElement>; onLoad?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedData?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedDataCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedMetadata?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadedMetadataCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadStart?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLoadStartCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onLostPointerCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onLostPointerCaptureCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onMouseDown?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseDownCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseEnter?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseLeave?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseMove?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseMoveCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOut?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOutCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOver?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseOverCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseUp?: import(\"react\").MouseEventHandler<HTMLDivElement>; onMouseUpCapture?: import(\"react\").MouseEventHandler<HTMLDivElement>; onPaste?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onPasteCapture?: import(\"react\").ClipboardEventHandler<HTMLDivElement>; onPause?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPauseCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlay?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlayCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlaying?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPlayingCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onPointerCancel?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerCancelCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerDown?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerDownCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerEnter?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerLeave?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerMove?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerMoveCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOut?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOutCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOver?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerOverCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerUp?: import(\"react\").PointerEventHandler<HTMLDivElement>; onPointerUpCapture?: import(\"react\").PointerEventHandler<HTMLDivElement>; onProgress?: import(\"react\").ReactEventHandler<HTMLDivElement>; onProgressCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onRateChange?: import(\"react\").ReactEventHandler<HTMLDivElement>; onRateChangeCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onReset?: import(\"react\").ReactEventHandler<HTMLDivElement>; onResetCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onScroll?: import(\"react\").UIEventHandler<HTMLDivElement>; onScrollCapture?: import(\"react\").UIEventHandler<HTMLDivElement>; onScrollEnd?: import(\"react\").UIEventHandler<HTMLDivElement>; onScrollEndCapture?: import(\"react\").UIEventHandler<HTMLDivElement>; onSeeked?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSeekedCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSeeking?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSeekingCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSelect?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSelectCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onStalled?: import(\"react\").ReactEventHandler<HTMLDivElement>; onStalledCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSubmit?: import(\"react\").SubmitEventHandler<HTMLDivElement>; onSubmitCapture?: import(\"react\").SubmitEventHandler<HTMLDivElement>; onSuspend?: import(\"react\").ReactEventHandler<HTMLDivElement>; onSuspendCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onTimeUpdate?: import(\"react\").ReactEventHandler<HTMLDivElement>; onTimeUpdateCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onToggle?: import(\"react\").ToggleEventHandler<HTMLDivElement>; onTouchCancel?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchCancelCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchEnd?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchEndCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchMove?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchMoveCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchStart?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTouchStartCapture?: import(\"react\").TouchEventHandler<HTMLDivElement>; onTransitionCancel?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionCancelCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionEnd?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionEndCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionRun?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionRunCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionStart?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onTransitionStartCapture?: import(\"react\").TransitionEventHandler<HTMLDivElement>; onVolumeChange?: import(\"react\").ReactEventHandler<HTMLDivElement>; onVolumeChangeCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onWaiting?: import(\"react\").ReactEventHandler<HTMLDivElement>; onWaitingCapture?: import(\"react\").ReactEventHandler<HTMLDivElement>; onWheel?: import(\"react\").WheelEventHandler<HTMLDivElement>; onWheelCapture?: import(\"react\").WheelEventHandler<HTMLDivElement>; part?: string; popover?: \"\" | \"auto\" | \"manual\" | \"hint\"; popoverTarget?: string; popoverTargetAction?: \"toggle\" | \"show\" | \"hide\"; prefix?: string; property?: string; radioGroup?: string; rel?: string; resource?: string; results?: number; rev?: string; role?: import(\"react\").AriaRole; security?: string; slot?: string; spellCheck?: (boolean | \"true\" | \"false\"); style?: import(\"react\").CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; title?: string; translate?: \"yes\" | \"no\"; typeof?: string; unselectable?: \"off\" | \"on\"; vocab?: string;",
     "SourceDesignationBadge": "className?: string; metadata?: SourceMetadataInput;",
     "SourceProvenance": "metadata?: SourceMetadataInput;",
diff --git a/docs/branch-review-records/69f8c9afc87b9d9cc96b53a279a21343d9958028c10817d02e7c975f91014522.record.md b/docs/branch-review-records/69f8c9afc87b9d9cc96b53a279a21343d9958028c10817d02e7c975f91014522.record.md
new file mode 100644
index 0000000000..5d8c541aea
--- /dev/null
+++ b/docs/branch-review-records/69f8c9afc87b9d9cc96b53a279a21343d9958028c10817d02e7c975f91014522.record.md
@@ -0,0 +1 @@
+| 2026-08-16 | PR #2007 / codex/guide-search-chrome-20260815 | 82576f737912e5fc2b601ec1e4f4ca74ebb04e69 | end-to-end PR review and base sync | Merged main without loss; fixed hidden Sheet safe-area retention; preserved focused Guide chrome coverage | Manual adversarial diff pass; TypeScript syntax probes; merge-tree and exact-head CI rechecked |
diff --git a/docs/branch-review-records/6cdaa052c37673355af42b196c2bb613fd5ed4615778a6e59fa3c4e010706922.record.md b/docs/branch-review-records/6cdaa052c37673355af42b196c2bb613fd5ed4615778a6e59fa3c4e010706922.record.md
new file mode 100644
index 0000000000..b08d6833d7
--- /dev/null
+++ b/docs/branch-review-records/6cdaa052c37673355af42b196c2bb613fd5ed4615778a6e59fa3c4e010706922.record.md
@@ -0,0 +1 @@
+| 2026-08-16 | PR #2007 / codex/guide-search-chrome-20260815 | 0874f3f7faa9539b6db30a58cee360adff4bf7a1 | design-system CI repair | Replaced the retired elevated shadow alias and removed two layout-transition exceptions from Guide chrome | Design-system contract diagnosis from exact-head CI; targeted source verification; exact-head CI re-run |
diff --git a/docs/branch-review-records/d9883c1c107d462f6ba5bf9e1447b570eb90fa0026059959a4ca253be147df3a.record.md b/docs/branch-review-records/d9883c1c107d462f6ba5bf9e1447b570eb90fa0026059959a4ca253be147df3a.record.md
new file mode 100644
index 0000000000..f7059f4c02
--- /dev/null
+++ b/docs/branch-review-records/d9883c1c107d462f6ba5bf9e1447b570eb90fa0026059959a4ca253be147df3a.record.md
@@ -0,0 +1 @@
+| 2026-08-17 | codex/guide-search-chrome-20260815 | 7365c7f36751b15f155b5228bdce075d9c4e09ec | PR #2007 CI fix: prettier format, design-sync contract regen, guide-centre scroll-hide race, ui-smoke scroll threshold + a11y (bodyTabIndex) | Fixed 4 CI failures (Static PR checks, Unit coverage x2, Production UI) so PR is ready to merge once CI reruns | npx vitest run (design-sync-contract, design-sync-visual-exports, guide-centre.dom, guide-centre-design-contract.dom); npx eslint on touched files; npx prettier --check; local Playwright production build+run of tests/ui-smoke.spec.ts guide centre test (3 iterations to isolate/fix/verify) and tests/guide-centre-chrome.spec.ts (found unmatched by testMatch, noted not fixed) |
diff --git a/src/components/clinical-dashboard/guide-dialog.tsx b/src/components/clinical-dashboard/guide-dialog.tsx
index f13df3d1f1..b940a493e4 100644
--- a/src/components/clinical-dashboard/guide-dialog.tsx
+++ b/src/components/clinical-dashboard/guide-dialog.tsx
@@ -23,7 +23,7 @@ import {
   X,
   type LucideIcon,
 } from "lucide-react";
-import { useMemo, useRef, useState, useSyncExternalStore, type UIEvent } from "react";
+import { useMemo, useRef, useState, type RefObject, type UIEvent } from "react";
 
 import {
   guideQuickTasks,
@@ -44,6 +44,7 @@ import {
   saveGuideProgress,
   type GuideProgress,
 } from "@/components/clinical-dashboard/guide-progress";
+import { readChromeCollapseMetrics, useScrollHideReporter } from "@/components/clinical-dashboard/use-hide-on-scroll";
 import { Sheet } from "@/components/ui/sheet";
 import {
   chatComposerIconButton,
@@ -57,23 +58,6 @@ import {
 } from "@/components/ui-primitives";
 
 const guideAccessibleNameId = "clinical-kb-guide-accessible-name";
-const phoneMediaQuery = "(max-width: 639px)";
-
-function subscribeToPhoneMedia(callback: () => void) {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return () => undefined;
-  const media = window.matchMedia(phoneMediaQuery);
-  media.addEventListener("change", callback);
-  return () => media.removeEventListener("change", callback);
-}
-
-function getPhoneMediaSnapshot() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-  return window.matchMedia(phoneMediaQuery).matches;
-}
-
-function usePhoneViewport() {
-  return useSyncExternalStore(subscribeToPhoneMedia, getPhoneMediaSnapshot, () => false);
-}
 
 const topicIcons: Record<GuideTopicId, LucideIcon> = {
   "getting-started": BookOpen,
@@ -88,12 +72,23 @@ const topicIcons: Record<GuideTopicId, LucideIcon> = {
 
 const quickTaskIcons: readonly LucideIcon[] = [HelpCircle, SlidersHorizontal, ShieldCheck, LockKeyhole];
 
-function GuideSearch({ query, onQueryChange }: { query: string; onQueryChange: (query: string) => void }) {
+function GuideSearch({
+  query,
+  inputRef,
+  onFocusChange,
+  onQueryChange,
+}: {
+  query: string;
+  inputRef: RefObject<HTMLInputElement | null>;
+  onFocusChange: (focused: boolean) => void;
+  onQueryChange: (query: string) => void;
+}) {
   return (
     <form
       role="search"
       aria-label="Search guide content"
       onSubmit={(event) => event.preventDefault()}
+      data-guide-universal-search
       className="mx-auto w-full max-w-3xl"
     >
       <div
@@ -108,9 +103,12 @@ function GuideSearch({ query, onQueryChange }: { query: string; onQueryChange: (
         <label className="min-w-0 flex-1">
           <span className="sr-only">Search the guide</span>
           <input
+            ref={inputRef}
             type="search"
             value={query}
             onChange={(event) => onQueryChange(event.target.value)}
+            onFocus={() => onFocusChange(true)}
+            onBlur={() => onFocusChange(false)}
             placeholder="Search the guide"
             className={cn(chatComposerInput, "answer-footer-search-input w-full min-w-0")}
             autoComplete="off"
@@ -139,7 +137,10 @@ function GuideTopNavigation({ view, onNavigate }: { view: GuideView; onNavigate:
     { view: "topics", label: "All topics", icon: Grid2X2 },
   ];
   return (
-    <nav aria-label="Guide views" className="grid grid-cols-3 border-y border-[color:var(--border)]">
+    <nav
+      aria-label="Guide views"
+      className="grid grid-cols-3 border-t border-[color:var(--border)] bg-[color:var(--surface-raised)]"
+    >
       {items.map((item) => {
         const active = view === item.view || (view === "topic" && item.view === "topics");
         const Icon = item.icon;
@@ -150,7 +151,7 @@ function GuideTopNavigation({ view, onNavigate }: { view: GuideView; onNavigate:
             onClick={() => onNavigate(item.view)}
             aria-current={active ? "page" : undefined}
             className={cn(
-              "relative inline-flex min-h-tap items-center justify-center gap-2 px-2 text-xs font-semibold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[color:var(--focus)] sm:text-sm",
+              "relative inline-flex min-h-tap items-center justify-center gap-1.5 px-1.5 text-xs font-semibold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[color:var(--focus)] sm:gap-2 sm:px-2 sm:text-sm",
               active
                 ? "text-[color:var(--clinical-accent)] after:absolute after:inset-x-4 after:bottom-0 after:h-0.5 after:bg-[color:var(--clinical-accent)]"
                 : "text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)]",
@@ -679,33 +680,46 @@ function GuideDialogSession({ onClose }: { onClose: () => void }) {
   const [progress, setProgress] = useState<GuideProgress>(() => loadGuideProgress());
   const [tourStepIndex, setTourStepIndex] = useState(0);
   const [tourComplete, setTourComplete] = useState(false);
+  const [searchFocused, setSearchFocused] = useState(false);
   const contentStartRef = useRef<HTMLDivElement | null>(null);
   const scrollBodyRef = useRef<HTMLDivElement | null>(null);
+  const headerRef = useRef<HTMLDivElement | null>(null);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
   const lastScrollTopRef = useRef(0);
-  const [mobileFooterHidden, setMobileFooterHidden] = useState(false);
-  const isPhoneViewport = usePhoneViewport();
-  const footerHidden = isPhoneViewport && mobileFooterHidden;
+  const chromeScrollHide = useScrollHideReporter(
+    searchFocused,
+    false,
+    `${view}:${activeTopicId}:${tourStepIndex}:${tourComplete}`,
+  );
+  const chromeHidden = chromeScrollHide.hidden;
 
   function focusPageStart() {
     window.requestAnimationFrame(() => {
       if (scrollBodyRef.current) scrollBodyRef.current.scrollTop = 0;
       lastScrollTopRef.current = 0;
-      setMobileFooterHidden(false);
+      chromeScrollHide.reset();
       contentStartRef.current?.querySelector<HTMLElement>("[data-guide-page-heading]")?.focus({ preventScroll: true });
     });
   }
 
   function handleBodyScroll(event: UIEvent<HTMLDivElement>) {
-    const nextScrollTop = event.currentTarget.scrollTop;
-    if (!isPhoneViewport) {
-      lastScrollTopRef.current = nextScrollTop;
-      setMobileFooterHidden(false);
-      return;
+    const target = event.currentTarget;
+    const nextScrollTop = target.scrollTop;
+    if (document.activeElement === searchInputRef.current && Math.abs(nextScrollTop - lastScrollTopRef.current) > 4) {
+      searchInputRef.current?.blur();
     }
-    const delta = nextScrollTop - lastScrollTopRef.current;
-    if (nextScrollTop <= 12) setMobileFooterHidden(false);
-    else if (delta > 6) setMobileFooterHidden(true);
-    else if (delta < -6) setMobileFooterHidden(false);
+    const collapseMetrics = readChromeCollapseMetrics(target);
+    const headerRelease = headerRef.current?.getBoundingClientRect().height ?? 0;
+    const reserveRelease = collapseMetrics.collapseBudget ?? 0;
+    chromeScrollHide.reportScroll({
+      offset: nextScrollTop,
+      maxOffset: Math.max(0, target.scrollHeight - target.clientHeight),
+      ...collapseMetrics,
+      collapseBudget: headerRelease + reserveRelease,
+      collapseKind: headerRelease > 0 ? "in-flow" : collapseMetrics.collapseKind,
+      combinedChrome: headerRelease > 0 && reserveRelease > 0,
+      source: target,
+    });
     lastScrollTopRef.current = nextScrollTop;
   }
 
@@ -764,14 +778,11 @@ function GuideDialogSession({ onClose }: { onClose: () => void }) {
   const footer = (
     <div
       data-guide-mobile-footer
-      aria-hidden={footerHidden}
-      inert={footerHidden || undefined}
-      className="flex min-w-0 items-center justify-center gap-3 sm:justify-between"
+      aria-hidden={chromeHidden}
+      inert={chromeHidden || undefined}
+      className="mx-auto grid w-full max-w-3xl min-w-0 gap-2.5"
     >
-      <p className={cn("hidden min-w-0 items-center gap-2 text-xs sm:flex", textMuted)}>
-        <ShieldCheck aria-hidden="true" className="size-icon-md shrink-0" /> Demo content only · Do not enter PHI
-      </p>
-      <div className="flex min-w-0 items-center justify-center gap-2 sm:ml-auto sm:justify-end">
+      <div data-guide-tour-action-row className="flex min-w-0 items-center justify-center gap-2">
         {view === "tour" && !tourComplete ? (
           <>
             <button
@@ -834,6 +845,23 @@ function GuideDialogSession({ onClose }: { onClose: () => void }) {
           </>
         )}
       </div>
+      <GuideSearch
+        query={query}
+        inputRef={searchInputRef}
+        onFocusChange={setSearchFocused}
+        onQueryChange={(nextQuery) => {
+          setQuery(nextQuery);
+          if (nextQuery.trim()) {
+            window.requestAnimationFrame(() => {
+              if (scrollBodyRef.current) scrollBodyRef.current.scrollTop = 0;
+              chromeScrollHide.reset();
+            });
+          }
+        }}
+      />
+      <p className={cn("hidden items-center justify-center gap-2 text-xs sm:flex", textMuted)}>
+        <ShieldCheck aria-hidden="true" className="size-icon-md shrink-0" /> Demo content only · Do not enter PHI
+      </p>
     </div>
   );
 
@@ -855,13 +883,21 @@ function GuideDialogSession({ onClose }: { onClose: () => void }) {
       contentClassName="relative font-sans sm:max-w-none lg:h-[min(56rem,calc(100dvh-3rem))] lg:max-w-[min(94vw,90rem)]"
       bodyClassName="p-0 sm:p-0"
       bodyRef={scrollBodyRef}
+      bodyTabIndex={0}
       onBodyScroll={handleBodyScroll}
-      headerClassName="pt-[max(1rem,env(safe-area-inset-top))] sm:pt-5"
+      headerRef={headerRef}
+      headerHidden={chromeHidden}
+      headerBottom={<GuideTopNavigation view={view} onNavigate={navigate} />}
+      headerClassName={cn(
+        "guide-centre-header max-h-48 overflow-hidden pt-[max(1rem,env(safe-area-inset-top))] transition-[border-color,opacity] duration-[var(--duration-moderate)] motion-reduce:transition-none sm:pt-5",
+        chromeHidden &&
+          "max-h-0 border-transparent p-0 opacity-0 sm:max-h-48 sm:border-[color:var(--border)] sm:p-5 sm:opacity-100",
+      )}
       mobilePlacement="fullscreen"
       footer={footer}
       footerClassName={cn(
-        "absolute inset-x-0 bottom-0 z-30 pl-[max(0.75rem,env(safe-area-inset-left))] pr-[max(0.75rem,env(safe-area-inset-right))] pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 transition-[transform,opacity] duration-[var(--duration-quick)] sm:static sm:p-4",
-        footerHidden &&
+        "absolute inset-x-0 bottom-0 z-30 border-t border-[color:var(--border)] bg-[color:var(--surface-raised)] pl-[max(0.75rem,env(safe-area-inset-left))] pr-[max(0.75rem,env(safe-area-inset-right))] pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 shadow-[var(--e4)] transition-[transform,opacity] duration-[var(--duration-moderate)] motion-reduce:transition-none sm:static sm:p-4 sm:shadow-none",
+        chromeHidden &&
           "pointer-events-none translate-y-full opacity-0 sm:pointer-events-auto sm:translate-y-0 sm:opacity-100",
       )}
       testId="clinical-kb-guide-centre"
@@ -870,14 +906,12 @@ function GuideDialogSession({ onClose }: { onClose: () => void }) {
       <span id={guideAccessibleNameId} className="sr-only">
         Clinical KB guide
       </span>
-      <div className="sticky top-0 z-20 bg-[color:var(--surface-raised)] px-3 pb-3 sm:px-5">
-        <GuideSearch query={query} onQueryChange={setQuery} />
-      </div>
-      <GuideTopNavigation view={view} onNavigate={navigate} />
       <div
         ref={contentStartRef}
         data-guide-content
-        className={cn("space-y-4 p-3 sm:p-5", footerHidden ? "pb-0" : "pb-28")}
+        data-reserve-owner="guide-search-dock"
+        data-reserve-hidden-pad="0"
+        className={cn("space-y-4 p-3 sm:p-5", chromeHidden ? "pb-0 sm:pb-5" : "pb-40 sm:pb-5")}
       >
         {hasSearch ? (
           <SearchResults query={query} onSelect={openTopic} />
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 1baba55e63..aafc1027a3 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -52,6 +52,9 @@ type SheetBaseProps = {
   titleAccessory?: ReactNode;
   descriptionContent?: ReactNode;
   headerActions?: ReactNode;
+  headerBottom?: ReactNode;
+  headerHidden?: boolean;
+  headerRef?: RefObject<HTMLDivElement | null>;
   headerClassName?: string;
   titleClassName?: string;
   closeButtonClassName?: string;
@@ -59,6 +62,13 @@ type SheetBaseProps = {
   contentStyle?: CSSProperties;
   bodyClassName?: string;
   bodyRef?: RefObject<HTMLDivElement | null>;
+  /**
+   * Makes the scrollable body reachable by keyboard when its content may not
+   * always include a focusable descendant (WCAG 2.1.1 / axe
+   * scrollable-region-focusable). Omit for bodies that always contain
+   * interactive content.
+   */
+  bodyTabIndex?: number;
   onBodyScroll?: UIEventHandler<HTMLDivElement>;
   footerClassName?: string;
   placement?: "default" | "left";
@@ -108,6 +118,9 @@ export function Sheet({
   titleAccessory,
   descriptionContent,
   headerActions,
+  headerBottom,
+  headerHidden = false,
+  headerRef,
   headerClassName,
   titleClassName,
   closeButtonClassName,
@@ -115,6 +128,7 @@ export function Sheet({
   contentStyle,
   bodyClassName,
   bodyRef,
+  bodyTabIndex,
   onBodyScroll,
   footerClassName,
   placement = "default",
@@ -459,12 +473,20 @@ export function Sheet({
         </div>
         {title ? (
           <div
+            ref={headerRef}
             data-sheet-header="true"
+            aria-hidden={headerHidden}
+            inert={headerHidden || undefined}
             className={cn(
-              "flex items-center justify-between gap-3 border-b border-[color:var(--border)] p-4 sm:p-5",
+              "flex items-center justify-between gap-x-3 border-b border-[color:var(--border)] p-4 sm:p-5",
+              Boolean(headerBottom) && "flex-wrap",
               headerClassName,
-              resolvedMobileHeaderSafeArea === "padding" && "pt-[max(1rem,var(--safe-area-top))] sm:pt-5",
-              resolvedMobileHeaderSafeArea === "offset" && "top-[max(0.75rem,var(--safe-area-top))] sm:top-4",
+              !headerHidden &&
+                resolvedMobileHeaderSafeArea === "padding" &&
+                "pt-[max(1rem,var(--safe-area-top))] sm:pt-5",
+              !headerHidden &&
+                resolvedMobileHeaderSafeArea === "offset" &&
+                "top-[max(0.75rem,var(--safe-area-top))] sm:top-4",
             )}
           >
             <div className="flex min-w-0 flex-1 items-center gap-3">
@@ -502,11 +524,17 @@ export function Sheet({
                 <X aria-hidden="true" className="h-4 w-4" />
               </button>
             </div>
+            {headerBottom ? (
+              <div className="order-last -mx-4 mt-3 w-[calc(100%+2rem)] basis-full sm:-mx-5 sm:w-[calc(100%+2.5rem)]">
+                {headerBottom}
+              </div>
+            ) : null}
           </div>
         ) : null}
         <div
           ref={bodyRef}
           onScroll={onBodyScroll}
+          tabIndex={bodyTabIndex}
           className={cn("min-h-0 min-w-0 flex-1 overflow-y-auto p-4 polished-scroll sm:p-5", bodyClassName)}
         >
           {children}
diff --git a/tests/guide-centre-chrome.spec.ts b/tests/guide-centre-chrome.spec.ts
new file mode 100644
index 0000000000..4945c2d95f
--- /dev/null
+++ b/tests/guide-centre-chrome.spec.ts
@@ -0,0 +1,117 @@
+import { expect, test, type Locator, type Page } from "playwright/test";
+
+const readySetupChecks = [
+  { id: "env", label: ".env.local configured", status: "ready", detail: "Test environment ready." },
+  { id: "project", label: "Clinical KB Database target", status: "ready", detail: "Test Supabase project ready." },
+  { id: "schema", label: "supabase/schema.sql applied", status: "ready", detail: "Test schema ready." },
+  { id: "search", label: "Search RPC and vector indexes", status: "ready", detail: "Test search schema ready." },
+  { id: "openai", label: "OpenAI API key available", status: "ready", detail: "Test OpenAI ready." },
+  { id: "worker", label: "npm run worker running", status: "unknown", detail: "Worker not required for UI smoke." },
+];
+
+async function waitForReactEventHandler(locator: Locator, eventName: "onClick") {
+  await expect
+    .poll(
+      async () =>
+        locator.evaluate((element, reactEventName) => {
+          const propsKey = Object.keys(element).find((key) => key.startsWith("__reactProps$"));
+          if (!propsKey) return false;
+          const props = (element as unknown as Record<string, Record<string, unknown>>)[propsKey];
+          return typeof props?.[reactEventName] === "function";
+        }, eventName),
+      { timeout: 15_000 },
+    )
+    .toBe(true);
+}
+
+async function mockGuideShell(page: Page) {
+  await page.route(/\/api\/local-project-id$/, async (route) => {
+    await route.fulfill({
+      json: {
+        appName: "Clinical KB",
+        projectId: "test-project",
+        identityPath: "/api/local-project-id",
+        localServer: {
+          currentUrl: "http://localhost:4298",
+          currentPort: 4298,
+          projectPortStart: 4298,
+          projectPortEnd: 53210,
+          safeLocalOrigin: true,
+          requestOrigin: null,
+          requestReferer: null,
+          unsafeLocalCaller: null,
+        },
+      },
+    });
+  });
+  await page.route("**/api/setup-status**", async (route) => {
+    await route.fulfill({ json: { demoMode: false, checks: readySetupChecks } });
+  });
+}
+
+async function openGuide(page: Page) {
+  const menuTrigger = page.getByRole("button", { name: "Open Clinical Guide menu" });
+  await expect(menuTrigger).toBeVisible({ timeout: 15_000 });
+  await waitForReactEventHandler(menuTrigger, "onClick");
+  await menuTrigger.click();
+
+  const menu = page.getByRole("dialog", { name: "Clinical Guide" });
+  await expect(menu).toBeVisible();
+  const settingsTrigger = menu.getByRole("button", { name: "Settings", exact: true });
+  await waitForReactEventHandler(settingsTrigger, "onClick");
+  await settingsTrigger.click();
+
+  const settings = page.getByRole("dialog", { name: "Account & app" });
+  await expect(settings).toBeVisible();
+  const guideTrigger = settings.getByRole("button", { name: "Guide & help", exact: true });
+  await waitForReactEventHandler(guideTrigger, "onClick");
+  await guideTrigger.click();
+
+  const dialog = page.getByRole("dialog", { name: "Clinical KB guide" });
+  await expect(dialog).toBeVisible();
+  await expect(dialog.getByPlaceholder("Search the guide")).toBeVisible();
+  return dialog;
+}
+
+test.describe("Clinical KB Guide Centre chrome", () => {
+  test("phone header and bottom search chrome hide together and leave the tab order", async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 820 });
+    await mockGuideShell(page);
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    await expect(page.locator("#main-content").first()).toBeVisible({ timeout: 15_000 });
+
+    const dialog = await openGuide(page);
+    const scrollBody = dialog.locator(".polished-scroll");
+    const footer = dialog.locator("[data-guide-mobile-footer]");
+    const header = dialog.locator('[data-sheet-header="true"]');
+
+    await expect(footer.locator("[data-guide-universal-search]")).toBeVisible();
+    await expect(footer.locator("[data-guide-tour-action-row]")).toBeVisible();
+
+    await scrollBody.evaluate((element) => {
+      element.scrollTop = 140;
+      element.dispatchEvent(new Event("scroll", { bubbles: true }));
+    });
+    await expect(footer).toHaveAttribute("aria-hidden", "true");
+    await expect(footer).toHaveAttribute("inert", "");
+    await expect(header).toHaveAttribute("aria-hidden", "true");
+    await expect(header).toHaveAttribute("inert", "");
+
+    await dialog.getByRole("button", { name: "Ask a better question" }).focus();
+    const tabStopCount = await dialog.locator('button, input, [href], [tabindex]:not([tabindex="-1"])').count();
+    for (let tabIndex = 0; tabIndex <= tabStopCount; tabIndex += 1) {
+      await page.keyboard.press("Tab");
+      await expect.poll(() => footer.evaluate((element) => element.contains(document.activeElement))).toBe(false);
+      await expect.poll(() => header.evaluate((element) => element.contains(document.activeElement))).toBe(false);
+    }
+
+    await scrollBody.evaluate((element) => {
+      element.scrollTop = 0;
+      element.dispatchEvent(new Event("scroll", { bubbles: true }));
+    });
+    await expect(footer).toHaveAttribute("aria-hidden", "false");
+    await expect(footer).not.toHaveAttribute("inert");
+    await expect(header).toHaveAttribute("aria-hidden", "false");
+    await expect(header).not.toHaveAttribute("inert");
+  });
+});
diff --git a/tests/guide-centre-design-contract.dom.test.tsx b/tests/guide-centre-design-contract.dom.test.tsx
new file mode 100644
index 0000000000..09258d48c3
--- /dev/null
+++ b/tests/guide-centre-design-contract.dom.test.tsx
@@ -0,0 +1,27 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vitest";
+
+import { GuideDialog } from "@/components/clinical-dashboard/guide-dialog";
+
+afterEach(async () => {
+  cleanup();
+  await new Promise<void>((resolve) => {
+    window.requestAnimationFrame(() => window.setTimeout(resolve, 60));
+  });
+});
+
+it("keeps Guide chrome on approved elevation and non-layout transitions", () => {
+  render(<GuideDialog open onClose={vi.fn()} />);
+
+  const dialog = screen.getByRole("dialog", { name: "Clinical KB guide" });
+  const header = dialog.querySelector<HTMLElement>(".guide-centre-header");
+  const footer = dialog.querySelector<HTMLElement>("[data-guide-mobile-footer]")?.parentElement;
+
+  expect(header).not.toBeNull();
+  expect(footer).not.toBeNull();
+  expect(header).toHaveClass("transition-[border-color,opacity]");
+  expect(header).not.toHaveClass("transition-[max-height,padding,border-color,opacity]");
+  expect(footer).toHaveClass("shadow-[var(--e4)]");
+  expect(footer).not.toHaveClass("shadow-[var(--shadow-elevated)]");
+  expect(footer).toHaveClass("transition-[transform,opacity]");
+});
diff --git a/tests/guide-centre.dom.test.tsx b/tests/guide-centre.dom.test.tsx
index 00e6226b93..28392e8858 100644
--- a/tests/guide-centre.dom.test.tsx
+++ b/tests/guide-centre.dom.test.tsx
@@ -1,4 +1,4 @@
-import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -42,7 +42,7 @@ describe("Clinical KB Guide Centre", () => {
     expect(within(dialog).getByRole("heading", { name: "How to verify an answer" })).toBeVisible();
   });
 
-  it("shows a useful verification example and hides the mobile tour action while scrolling down", () => {
+  it("shows a useful verification example and hides the shared header and bottom search chrome while scrolling down", async () => {
     vi.spyOn(window, "matchMedia").mockImplementation(
       () =>
         ({
@@ -56,30 +56,49 @@ describe("Clinical KB Guide Centre", () => {
     expect(within(dialog).getByLabelText("Neutral illustrative answer")).toHaveTextContent(
       "place its citation beside the words it supports",
     );
+    // Mount schedules an rAF-deferred hide-state reset (use-hide-on-scroll's
+    // resetKey effect); flush it before the first scroll so it cannot fire
+    // after and revert the scroll-triggered hide mid-assertion.
+    await new Promise<void>((resolve) => window.requestAnimationFrame(() => resolve()));
 
     const scrollBody = dialog.querySelector<HTMLElement>(".polished-scroll");
     const footer = dialog.querySelector<HTMLElement>("[data-guide-mobile-footer]");
     const footerLayer = footer?.parentElement;
+    const header = dialog.querySelector<HTMLElement>(".guide-centre-header");
     const content = dialog.querySelector<HTMLElement>("[data-guide-content]");
     expect(scrollBody).not.toBeNull();
     expect(footer).not.toBeNull();
+    expect(header).not.toBeNull();
     expect(content).not.toBeNull();
+    expect(footer?.querySelector("[data-guide-universal-search]")).not.toBeNull();
+    expect(footer?.querySelector("[data-guide-tour-action-row]")).not.toBeNull();
+    expect(header).toHaveClass("pt-[max(1rem,var(--safe-area-top))]");
 
-    Object.defineProperty(scrollBody, "scrollTop", { configurable: true, value: 80 });
+    Object.defineProperty(scrollBody, "scrollHeight", { configurable: true, value: 1_600 });
+    Object.defineProperty(scrollBody, "clientHeight", { configurable: true, value: 600 });
+    Object.defineProperty(scrollBody, "scrollTop", { configurable: true, value: 140 });
     fireEvent.scroll(scrollBody!);
-    expect(footerLayer).toHaveClass("translate-y-full");
+    await waitFor(() => expect(footerLayer).toHaveClass("translate-y-full"));
+    expect(header).toHaveClass("max-h-0");
+    expect(header).not.toHaveClass("pt-[max(1rem,var(--safe-area-top))]");
+    expect(header).toHaveAttribute("aria-hidden", "true");
+    expect(header).toHaveAttribute("inert", "");
     expect(footer).toHaveAttribute("aria-hidden", "true");
     expect(footer).toHaveAttribute("inert", "");
     expect(within(footer!).queryByRole("button", { name: "Start guided tour" })).not.toBeInTheDocument();
     expect(content).toHaveClass("pb-0");
-    expect(content).not.toHaveClass("pb-28");
+    expect(content).not.toHaveClass("pb-40");
 
     Object.defineProperty(scrollBody, "scrollTop", { configurable: true, value: 0 });
     fireEvent.scroll(scrollBody!);
-    expect(footerLayer).not.toHaveClass("translate-y-full");
+    await waitFor(() => expect(footerLayer).not.toHaveClass("translate-y-full"));
+    expect(header).not.toHaveClass("max-h-0");
+    expect(header).toHaveClass("pt-[max(1rem,var(--safe-area-top))]");
+    expect(header).toHaveAttribute("aria-hidden", "false");
+    expect(header).not.toHaveAttribute("inert");
     expect(footer).toHaveAttribute("aria-hidden", "false");
     expect(footer).not.toHaveAttribute("inert");
-    expect(content).toHaveClass("pb-28");
+    expect(content).toHaveClass("pb-40");
   });
 
   it("keeps the guide footer available while the desktop body scrolls", () => {
@@ -95,7 +114,7 @@ describe("Clinical KB Guide Centre", () => {
     expect(footerLayer).not.toHaveClass("translate-y-full");
     expect(footer).toHaveAttribute("aria-hidden", "false");
     expect(footer).not.toHaveAttribute("inert");
-    expect(content).toHaveClass("pb-28");
+    expect(content).toHaveClass("pb-40");
   });
 
   it("wires every quick task to its complete guide topic", async () => {
diff --git a/tests/ui-smoke.spec.ts b/tests/ui-smoke.spec.ts
index 60dd158652..d707b2f58c 100644
--- a/tests/ui-smoke.spec.ts
+++ b/tests/ui-smoke.spec.ts
@@ -5403,19 +5403,25 @@ test.describe("Clinical KB UI smoke coverage", () => {
     const dialog = await openGuide(page);
     const guideScrollBody = dialog.locator(".polished-scroll");
     const mobileFooter = dialog.locator("[data-guide-mobile-footer]");
+    const mobileHeader = dialog.locator('[data-sheet-header="true"]');
     await guideScrollBody.evaluate((element) => {
-      element.scrollTop = 80;
+      element.scrollTop = 140;
       element.dispatchEvent(new Event("scroll", { bubbles: true }));
     });
     await expect(mobileFooter).toHaveAttribute("aria-hidden", "true");
     await expect(mobileFooter).toHaveAttribute("inert", "");
+    await expect(mobileHeader).toHaveAttribute("aria-hidden", "true");
+    await expect(mobileHeader).toHaveAttribute("inert", "");
 
-    // The hidden mobile footer must not be reachable by keyboard tabbing.
-    await dialog.getByRole("button", { name: "Close guide" }).focus();
+    // The hidden mobile header and footer must not be reachable by keyboard
+    // tabbing. Close guide now lives in the header, which is itself inert
+    // while hidden, so start from a content control instead.
+    await dialog.getByRole("button", { name: "Ask a better question" }).focus();
     const tabStopCount = await dialog.locator('button, input, [href], [tabindex]:not([tabindex="-1"])').count();
     for (let tabIndex = 0; tabIndex <= tabStopCount; tabIndex += 1) {
       await page.keyboard.press("Tab");
       await expect.poll(() => mobileFooter.evaluate((element) => element.contains(document.activeElement))).toBe(false);
+      await expect.poll(() => mobileHeader.evaluate((element) => element.contains(document.activeElement))).toBe(false);
     }
 
     await guideScrollBody.evaluate((element) => {