@jsenv/navi 0.29.81 → 0.29.83

package/dist/jsenv_navi.js

@@ -22179,7 +22179,14 @@ const getFocusedBeforeTransfer = (e) => {
  * @param {boolean|"last-resort"|"restore"} autoFocus
  *   When false the hook is a no-op. The other values say WHEN this element is
  *   the right place for the keyboard (the whole ladder lives in
- *   findFocusTarget, see focus_transfer.js):
+ *   findFocusTarget, see focus_transfer.js, and the decisions behind it in
+ *   docs/autofocus.md):
+ *   - `true` — "I am what the user came for". On a FIELD it asks for the
+ *     keyboard outright, on a touch device included, where a popup otherwise
+ *     keeps it down: the comment box of a popup opened to write a comment. On a
+ *     CONTAINER it says the opposite, since a surface takes no keyboard by
+ *     being focused — the popup that is read before it is filled, arriving at
+ *     the top of its own reading order.
  *   - `"last-resort"` — "not me, unless you have nothing else". Said by a
  *     focusable that is a poor place to arrive (a picker's search box, a
  *     panel's close button, a slide's chevron) and by a container about its own
@@ -22649,6 +22656,24 @@ const scrollTo = ({ x, y }) => {
 const [publishBeforeRouting, observeBeforeRouting] = createPubSub();
 const [publishAfterRouting, observeAfterRouting] = createPubSub();
 
+/*
+ * A press aims at a place; it does not always go one step deeper. A row of tabs
+ * is a lateral move — the neighbour is one finger away — so the whole row should
+ * weigh one history entry: the arrow at the top and the phone's back button then
+ * leave by where the reader came in, and the swipe (which replaces already, see
+ * route_travel.jsx) and the press say the same thing.
+ *
+ * `<Link replace>` is that, and it travels as an attribute because the click
+ * handler sees the anchor, not the component that rendered it — the same mouth
+ * as what a link asks of a route transition.
+ */
+
+const LINK_REPLACE_ATTRIBUTE = "data-navi-replace";
+
+const linkAsksForReplace = (linkElement) => {
+  return linkElement.hasAttribute(LINK_REPLACE_ATTRIBUTE);
+};
+
 const setupBrowserIntegrationViaHistory = ({
   applyActions,
   applyRouting,
@@ -22929,7 +22954,9 @@ const setupBrowserIntegrationViaHistory = ({
       e.preventDefault();
       handleRoutingTask(href, {
         reason: `"click" on a[href="${href}"]`,
-        navigationType: "push",
+        // A link that takes the place of the current entry instead of stacking
+        // on it says so on itself (see link_replace.js).
+        navigationType: linkAsksForReplace(linkElement) ? "replace" : "push",
         // Who started it. Announced with the navigation because a press
         // carries things the url does not: what a link asks of a route
         // transition is the first of them (see route_transition.jsx). Read by
@@ -44326,6 +44353,12 @@ Object.assign(PSEUDO_CLASSES, {
  *   the pair's movement and only turns it round, which is what the rare way
  *   round a pair usually needs. Said nowhere else, the relations answer as
  *   they always do.
+ * @param {boolean} [props.replace] - Go to the destination by TAKING THE PLACE
+ *   of the current history entry instead of stacking onto it: the link stays a
+ *   link (an address, a middle click, the keyboard, `aria-current`), only the
+ *   way there changes. What a row of tabs wants — the neighbour is a lateral
+ *   move, not a step deeper, so the whole row weighs one entry and the back
+ *   button leaves by where the reader came in.
  * @param {boolean} [props.preventDefault] - Call `event.preventDefault()` on
  *   click (navigation suppressed; `onClick` still runs).
  * @param {(event: MouseEvent) => void} [props.onClick]
@@ -44390,6 +44423,7 @@ const LinkPlain = props => {
     revealOnInteraction = false,
     hrefFallback = !anchor,
     routeTransition,
+    replace,
     children
   } = props;
   if (anchor && !props.id) {
@@ -44503,6 +44537,13 @@ const LinkPlain = props => {
   // a name; anything more travels as JSON, which is also how a plain <a>
   // writes it by hand.
   const routeTransitionRequest = routeTransition === undefined || routeTransition === null ? undefined : typeof routeTransition === "string" ? routeTransition : JSON.stringify(routeTransition);
+
+  // Which way this link goes to the place it aims at, worn as an attribute so
+  // that whoever answers the press reads it off the anchor (see
+  // link_replace.js, which owns the name and does the reading).
+  const replaceRequest = replace ? {
+    [LINK_REPLACE_ATTRIBUTE]: ""
+  } : null;
   const innerChildren = children || (hrefFallback ? href : children);
   const startIconEl = startIcon;
   const endIconEl = innerEndIcon;
@@ -44554,7 +44595,9 @@ const LinkPlain = props => {
     endIcon: undefined,
     hrefFallback: undefined,
     routeTransition: undefined,
+    replace: undefined,
     "data-navi-route-transition-request": routeTransitionRequest,
+    ...replaceRequest,
     onClick: e => {
       onClick?.(e);
       if (slide) {
@@ -49864,6 +49907,13 @@ const inputCss = /* css */`
 
       .navi_button {
         font-size: inherit;
+        /* A <button> does not inherit the font on its own — same as the
+           <input> above — and what stands in a slot is measured on the line
+           box (Icon fillLine is 1lh): left on the browser's own font, the
+           clear cross would resolve 1lh against a font the field is not
+           written in, and the field would change height the moment the icon
+           is replaced by the button. */
+        font-family: inherit;
 
         /* A button in a slot (e.g. the clear cross) is drawn small but must
            not be small to hit: the spacing around it — the slot margins on the