@synopackageland/ui 0.20.15 → 0.20.17

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 0.20.17 (2026-11-06)
+
+- On a touch screen, a control at the end edge of its own component no longer makes an App's page scroll sideways. A dismissible `Callout` stretched to full width in an App's own vertical scroller (not inside a `PageContent`) had its close button's 44px tap box reach 2px past the scroller (12px for an inline Callout) at 390px, so the scroller was wider than its view and a sideways drag moved the page. The shared tap box (hit-area.css) now takes `--ui-hit-end-room`, the room between a control and its component's end edge: the box stops at that edge and grows towards the control's start side instead, still 44px, and nothing is drawn differently. The Callout close button, a `Tag`'s remove button, the `SearchField` clear button, the password reveal button, the `PathDisplay` copy button and the `Notification` close button set it. A Tag's remove button drops its own extra 32px tap box, which the shared 44px box already covered. `FileThumbs` and `RichTextEditor` image thumbnails stop the tap box of the last item and its remove button at the row's end edge (the last `FileThumbs` item's box is 34px wide instead of 42px, its remove badge's 30px), and removable `FileThumbs` keep 6px at the end so the remove badge no longer sticks out of the row; the `InputSteppers` presets button's tap box stops at the field's edge and keeps its 32px by reaching further towards the text. Dialog, Drawer (`Sheet`), Toast, RecordPanel and AsidePanel close buttons already fit inside their headers and are unchanged (docs/mobile-native.md, "Hit area")
+
+## 0.20.16 (2026-11-06)
+
+- Dialog, Drawer (`Sheet`, left and right) and `BottomSheet` now really give focus back to their opener on close. Since 0.20.15 they called `focus()` while the closing panel still held the page behind it: inside an `AppRoot` the background stays `inert` until the leave animation ends, so in a browser a `BottomSheet`, and every Dialog on a phone, left focus on `<body>`. Focus now moves once the panel has left the page and the opener is no longer inert, checked frame by frame for up to 120 frames, and only lands if `document.activeElement` is the opener. Focus the user has moved elsewhere in the meantime stays there, reopening the overlay cancels it, and a `closeAutoFocus` listener that prevents the default still places focus itself
+- New browser check `check:focus-restore` (in the full gate): each overlay opens from a button and closes by Escape and by Close, at 390x844 with touch and at 1440x900 with a mouse, and focus must be back on the button
+
 ## 0.20.15 (2026-11-06)
 
 - On a short touch screen (a coarse pointer, at most 480px tall: a tablet or a phone in landscape), a settings page's section strip and Reset / Apply footer are compact again: the `SectionTabs` strip is drawn 36px tall and the footer 48px (Apply 36px), instead of 44px and 64px since 0.20.13, so at 753x239 the rows between them get 147px or more instead of 131px. Every tab and footer button keeps a 44px tap box from the hit slop (`data-ui-hit`): a tab's reaches 8px down over the top of the page, a button's 4px up and down inside the footer, and neither scrolls anything or covers a neighbour. Taller touch layouts keep their 44px strip and buttons (docs/adaptive-layout.md, "Short screens")

package/dist/composables/openerFocus.d.ts

@@ -1,3 +1,4 @@
+export declare const OPENER_FOCUS_FRAMES = 120;
 /**
  * Gives focus back to the element that opened an overlay.
  *
@@ -6,9 +7,18 @@
  * a dialog opened by a click that did not focus its button (Safari, touch),
  * left focus on <body> when Escape or the Close button shut it. The opener is
  * the focused element when `open` turns true, else the control just pressed.
+ *
  * The returned handler, called from the content's `closeAutoFocus` after the
- * consumer's own listener, focuses it if it is still in the document and can
- * take focus. A consumer that prevents the default keeps full control; an
- * opener that is gone or cannot take focus leaves Reka's default.
+ * consumer's own listener, runs when the overlay starts to close: its content
+ * is still in the document, playing its leave transition, and the page behind
+ * may still be inert or hidden, so a focus call there does nothing. The
+ * handler takes over from Reka's default and waits until the content has left
+ * the document and the opener is no longer inside an inert subtree, then
+ * focuses the opener and checks that it took focus: first once Vue has applied
+ * the close (enough when nothing animates), then on each animation frame up to
+ * OPENER_FOCUS_FRAMES. It stops without moving focus once the user has focused
+ * something else, when the overlay opens again, or when the opener leaves the
+ * document. A consumer that prevents the default
+ * keeps full control.
  */
 export declare function useOpenerFocus(open: () => boolean): (event: Event) => void;