@synopackageland/ui 0.20.16 → 0.20.17

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## 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

package/dist/index.js

@@ -3234,7 +3234,7 @@ const sw = ["value", "type", "name", "placeholder", "disabled", "readonly"], uw
           disabled: r(n),
           "aria-label": u.value ? r(i)("Hide password") : r(i)("Show password"),
           "aria-pressed": u.value,
-          class: "absolute right-1 flex size-6 items-center justify-center rounded-[var(--ui-radius-sm)] border-0 bg-transparent p-0 text-[var(--ui-text-secondary)] outline-none hover:text-[var(--ui-text)] focus-visible:shadow-[0_0_0_2px_var(--ui-focus-ring)] disabled:opacity-40",
+          class: "absolute right-1 flex size-6 [--ui-hit-end-room:4px] items-center justify-center rounded-[var(--ui-radius-sm)] border-0 bg-transparent p-0 text-[var(--ui-text-secondary)] outline-none hover:text-[var(--ui-text)] focus-visible:shadow-[0_0_0_2px_var(--ui-focus-ring)] disabled:opacity-40",
           onClick: C[1] || (C[1] = (_) => u.value = !u.value)
         }, [
           u.value ? (d(), A(r(Ey), {
@@ -22775,7 +22775,7 @@ const qA = ["disabled", "aria-label"], FA = { class: "relative min-w-0 flex-1" }
                   default: S(() => [
                     R("button", {
                       type: "button",
-                      class: "absolute top-1/2 right-0.5 flex size-5 [@media(pointer:coarse)]:after:absolute [@media(pointer:coarse)]:after:-inset-1.5 [@media(pointer:coarse)]:after:content-[''] -translate-y-1/2 items-center justify-center rounded-[var(--ui-radius-sm)] text-[var(--ui-text-muted)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[0_0_0_2px_var(--ui-focus-ring)] disabled:opacity-40",
+                      class: "absolute top-1/2 right-0.5 flex size-5 [@media(pointer:coarse)]:after:absolute [@media(pointer:coarse)]:after:-inset-1.5 [@media(pointer:coarse)]:after:-end-0.5 [@media(pointer:coarse)]:after:-start-2.5 [@media(pointer:coarse)]:after:content-[''] -translate-y-1/2 items-center justify-center rounded-[var(--ui-radius-sm)] text-[var(--ui-text-muted)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[0_0_0_2px_var(--ui-focus-ring)] disabled:opacity-40",
                       disabled: r(o),
                       "aria-expanded": x.value,
                       "aria-label": Z.value.presets
@@ -30137,7 +30137,7 @@ const nU = /* @__PURE__ */ Ed(ZB, [["render", QB]]), oU = /* @__PURE__ */ U({
             type: "button",
             disabled: e.disabled,
             "aria-label": `${r(o).removeLabel} ${e.label}`,
-            class: "relative -mr-0.5 ml-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-[var(--ui-radius-sm)] text-[var(--ui-text-secondary)] opacity-60 outline-none hover:opacity-100 focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-40 [@media(pointer:coarse)]:after:absolute [@media(pointer:coarse)]:after:-inset-2 [@media(pointer:coarse)]:after:content-['']",
+            class: "relative -mr-0.5 ml-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-[var(--ui-radius-sm)] text-[var(--ui-text-secondary)] opacity-60 outline-none hover:opacity-100 focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-40 [--ui-hit-end-room:5px]",
             "data-tag-remove": "",
             onClick: Le(P, ["stop"])
           }, [
@@ -31560,7 +31560,7 @@ const tM = ["aria-label", "aria-labelledby", "data-ui-segment-control", "data-ov
         disabled: r(n),
         type: "button",
         "aria-label": r(o).clearLabel,
-        class: "absolute top-1/2 right-1.5 flex size-6 border-0 bg-transparent -translate-y-1/2 items-center justify-center rounded-[var(--ui-radius-control)] text-[var(--ui-text-muted)] hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] outline-none focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-50",
+        class: "absolute top-1/2 right-1.5 flex size-6 [--ui-hit-end-room:6px] border-0 bg-transparent -translate-y-1/2 items-center justify-center rounded-[var(--ui-radius-control)] text-[var(--ui-text-muted)] hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] outline-none focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-50",
         onClick: p[1] || (p[1] = (v) => {
           r(u)(""), i("update:modelValue", "");
         })
@@ -35516,7 +35516,7 @@ const bq = { class: "flex min-h-14 shrink-0 items-center gap-3 px-3 pt-[env(safe
     const p = (g) => Og(g) && g.thumb && (g.state ?? "ready") === "ready" && !c.value.has(g.id), v = h(() => t.size === "sm" ? "size-7 rounded-[var(--ui-radius-sm)]" : "size-16 rounded-[var(--ui-radius-md)]"), m = (g) => g.state === "processing" ? `${g.name}, ${o("Processing")}` : g.state === "missing" ? `${g.name}, ${o("File is missing")}` : g.state === "failed" ? `${g.name}, ${o("Can't show this file")}` : g.name;
     return (g, w) => e.items.length ? (d(), y("div", {
       key: 0,
-      class: "flex min-w-0 flex-wrap items-center gap-1",
+      class: ne(["flex min-w-0 flex-wrap items-center gap-1 [&>:last-child]:after:end-0 [&>:last-child>button]:after:end-0", e.removable && "pe-1.5"]),
       "data-size": e.size,
       "data-ui-file-thumbs": "",
       "data-syno-pkg-land-ui": ""
@@ -35597,7 +35597,7 @@ const bq = { class: "flex min-h-14 shrink-0 items-center gap-3 px-3 pt-[env(safe
         "onUpdate:index": w[2] || (w[2] = (x) => u.value = x),
         items: e.items
       }, null, 8, ["open", "index", "items"])) : O("", !0)
-    ], 8, aF)) : O("", !0);
+    ], 10, aF)) : O("", !0);
   }
 }), lF = ["aria-label"], sF = { class: "flex min-h-11 items-center gap-1 border-b border-[var(--ui-border-subtle)] ps-3 pe-1.5" }, uF = {
   class: "min-w-0 flex-1 font-semibold",
@@ -38152,9 +38152,9 @@ const UV = ["aria-label", "multiple", "accept", "disabled", "webkitdirectory"],
         type: "button",
         "data-ui-path-copy": "",
         "data-ui-hit": "",
+        class: ne([e.display === "name" ? "[--ui-hit-end-room:0px]" : "[--ui-hit-end-room:5px]", "relative flex size-5 shrink-0 items-center justify-center rounded-[var(--ui-radius-sm)] border-0 bg-transparent p-0 text-[var(--ui-text-secondary)] outline-none transition-colors duration-[var(--ui-motion-fast)] hover:bg-[var(--ui-control-bg-active)] hover:text-[var(--ui-text)] focus-visible:text-[var(--ui-text)] focus-visible:shadow-[0_0_0_2px_var(--ui-focus-ring)]"]),
         "aria-label": i.value ? r(o)("Copied") : r(o)("Copy path"),
         title: i.value ? r(o)("Copied") : r(o)("Copy path"),
-        class: "relative flex size-5 shrink-0 items-center justify-center rounded-[var(--ui-radius-sm)] border-0 bg-transparent p-0 text-[var(--ui-text-secondary)] outline-none transition-colors duration-[var(--ui-motion-fast)] hover:bg-[var(--ui-control-bg-active)] hover:text-[var(--ui-text)] focus-visible:text-[var(--ui-text)] focus-visible:shadow-[0_0_0_2px_var(--ui-focus-ring)]",
         onClick: f
       }, [
         i.value ? (d(), A(r(bt), {
@@ -38166,7 +38166,7 @@ const UV = ["aria-label", "multiple", "accept", "disabled", "webkitdirectory"],
           class: "size-3.5",
           "aria-hidden": "true"
         }))
-      ], 8, vN)) : O("", !0),
+      ], 10, vN)) : O("", !0),
       T(p.$slots, "actions"),
       s ? (d(), A(Ha, {
         key: 3,
@@ -39451,7 +39451,7 @@ const PN = { class: "mb-3 flex flex-wrap items-start justify-between gap-3" }, D
         R("button", {
           type: "button",
           "data-ui-hit": "",
-          class: "-mr-2 -mt-2 flex size-8 shrink-0 items-center justify-center rounded-[var(--ui-radius-sm)] text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[0_0_0_3px_var(--ui-focus-ring)]",
+          class: "-mr-2 -mt-2 flex size-8 [--ui-hit-end-room:5px] shrink-0 items-center justify-center rounded-[var(--ui-radius-sm)] text-[var(--ui-text-secondary)] outline-none hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] focus-visible:shadow-[0_0_0_3px_var(--ui-focus-ring)]",
           "aria-label": r(o).closeLabel,
           onClick: V[2] || (V[2] = (X) => i("close"))
         }, [

package/dist/json-preview/preview.js

@@ -15126,7 +15126,7 @@ const gO = {
           disabled: d(o),
           "aria-label": l.value ? d(a)("Hide password") : d(a)("Show password"),
           "aria-pressed": l.value,
-          class: "absolute right-1 flex size-6 items-center justify-center rounded-[var(--ui-radius-sm)] border-0 bg-transparent p-0 text-[var(--ui-text-secondary)] outline-none hover:text-[var(--ui-text)] focus-visible:shadow-[0_0_0_2px_var(--ui-focus-ring)] disabled:opacity-40",
+          class: "absolute right-1 flex size-6 [--ui-hit-end-room:4px] items-center justify-center rounded-[var(--ui-radius-sm)] border-0 bg-transparent p-0 text-[var(--ui-text-secondary)] outline-none hover:text-[var(--ui-text)] focus-visible:shadow-[0_0_0_2px_var(--ui-focus-ring)] disabled:opacity-40",
           onClick: E[1] || (E[1] = (b) => l.value = !l.value)
         }, [
           l.value ? (g(), L(d(QP), {
@@ -29562,7 +29562,7 @@ const _z = ["aria-label", "aria-labelledby", "data-ui-segment-control", "data-ov
         disabled: d(o),
         type: "button",
         "aria-label": d(r).clearLabel,
-        class: "absolute top-1/2 right-1.5 flex size-6 border-0 bg-transparent -translate-y-1/2 items-center justify-center rounded-[var(--ui-radius-control)] text-[var(--ui-text-muted)] hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] outline-none focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-50",
+        class: "absolute top-1/2 right-1.5 flex size-6 [--ui-hit-end-room:6px] border-0 bg-transparent -translate-y-1/2 items-center justify-center rounded-[var(--ui-radius-control)] text-[var(--ui-text-muted)] hover:bg-[var(--ui-surface-hover)] hover:text-[var(--ui-text)] outline-none focus-visible:shadow-[var(--ui-shadow-focus)] disabled:opacity-50",
         onClick: f[1] || (f[1] = (p) => {
           d(l)(""), a("update:modelValue", "");
         })

package/dist/reka-runtime.json

@@ -3,7 +3,7 @@
   "version": "2.11.0",
   "delivery": "bundled-patched-esm",
   "patchManifestSha256": "9c5b9c9a162fa584b4695a683368a4484b3ac6e70177fd063b77aa618c051627",
-  "bundleSha256": "eb613b4d73779b8477f413cf3f4d5f1395d35804296c78dc500921fb9f03cc91",
+  "bundleSha256": "f1f30ec0f83f82d46859ca387063cec5501a14c637c171d7577a55b97ee51fdb",
   "sourceHashes": {
     "shared/useBodyScrollLock.js": "287bfb604318c4202769e4b5191896eaf0e52a952e1de898967cbe09467fcfda",
     "DismissableLayer/DismissableLayer.js": "3c8d248f0a32e01f89ca1f6202b1bb691bf5d0e4012a92535e161c35e69cdc32",

package/dist/rich-text.js

@@ -828,7 +828,7 @@ const La = ["data-variant", "data-over"], Sa = ["aria-label"], Aa = ["aria-label
       }, 8, ["editor"])) : C("", !0),
       s.value && c.value.length ? (p(), y("ul", {
         key: 3,
-        class: "m-0 flex list-none flex-wrap gap-2 px-2.5 pb-2 pt-0.5",
+        class: "m-0 flex list-none flex-wrap gap-2 px-2.5 pb-2 pt-0.5 [&>:last-child>button]:after:-end-1",
         "aria-label": l(n)("Images"),
         "data-ui-rich-attachments": ""
       }, [