@jsenv/navi 0.29.100 → 0.29.102

package/dist/jsenv_navi.js

@@ -49,6 +49,16 @@ const css$15 = /* css */`
       --navi-z-index-control-hovered: 1;
       --navi-z-index-control-focused: 2;
 
+      /* A control the user is not on and yet still has to paint in front: one
+         holding something open (a picker showing its list, an expandable
+         header). Its border keeps the color the open state gives it, while
+         hover and focus have both moved on — into the popup, or onto whatever
+         the pointer travelled to next — so neither of the two values above is
+         there to raise it, and the neighbour painted after it cuts the very
+         border that says what is open. Above both: the member holding the
+         popup open outranks a member merely hovered or focused. */
+      --navi-z-index-control-expanded: 3;
+
       /* Kept stuck while something scrolls under it: a list header, the head
          and foot of a side panel, a table's sticky cells, the header and
          footer of any scrolling Box. Above raised controls — a control
@@ -2819,7 +2829,10 @@ const readSignalForUrlBuild = (connection) => {
 /**
  * Creates a custom route pattern matcher
  */
-const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
+const createRoutePattern = (
+  pattern,
+  { searchParams = {}, params: paramConstraints = {} } = {},
+) => {
   // Detect and process path signals in the pattern
   const [cleanPattern, pathConnections] = detectSignals(pattern);
 
@@ -2844,9 +2857,11 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
   // All connections (path + query) for ancestor/descendant signal resolution
   const connections = [...pathConnections, ...queryConnectionMap.values()];
 
+  const paramConstraintMap = createParamConstraintMap(paramConstraints);
   const parsedPattern = parsePattern(cleanPattern, {
     pathConnectionMap,
     queryConnectionMap,
+    paramConstraintMap,
   });
 
   debug$3(`[CustomPattern] Created pattern:`, parsedPattern);
@@ -2854,11 +2869,21 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
   debug$3(`[CustomPattern] Path connections:`, pathConnectionMap.size);
   debug$3(`[CustomPattern] Query connections:`, queryConnectionMap.size);
 
-  const applyOn = (url) => {
+  /**
+   * @param {string} url
+   * @param {object} [options]
+   * @param {boolean} [options.exact] - Only match the url this pattern is the
+   *   address of: a trailing slash or a wildcard stops catching what lies below
+   *   it. What "/" means for a container ("everything under me") and what it
+   *   means for a redirection ("that very address") are not the same question.
+   */
+  const applyOn = (url, { exact = false } = {}) => {
     const result = matchUrl(parsedPattern, url, {
       baseUrl,
       baseFileUrl,
       queryConnectionMap,
+      paramConstraintMap,
+      exact,
       patternObj: patternObject,
     });
 
@@ -3524,7 +3549,9 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
     const entryIsMeaningful = (conn) => {
       const entry = intended.get(conn.paramName);
       return (
-        Boolean(entry) && entry.value !== undefined && conn.isCustomValue(entry.value)
+        Boolean(entry) &&
+        entry.value !== undefined &&
+        conn.isCustomValue(entry.value)
       );
     };
     if (ancestorPattern !== patternObject.parent) {
@@ -3714,6 +3741,7 @@ const createRoutePattern = (pattern, { searchParams = {} } = {}) => {
     connections,
     pathConnectionMap, // Separate map for path parameters
     queryConnectionMap, // Separate map for query parameters
+    paramConstraintMap, // Which values each param accepts (Map<paramName, test>)
     parsedPattern,
     children: [],
     parent: null,
@@ -3821,10 +3849,60 @@ const detectSignals = (routePattern) => {
   return [updatedPattern, signalConnections];
 };
 
+const EMPTY_PARAM_CONSTRAINT_MAP = new Map();
+
+/**
+ * Turns `{ gameId: /^W-[A-Z0-9]{8}$/i }` into `Map<paramName, (value) => boolean>`.
+ * A constraint is a regexp, a list of accepted values, or a predicate.
+ * A constraint decides which url segments the param accepts; a segment it
+ * declines makes the whole route a non-match, so only path params can carry
+ * one — a search param is extracted from a url the path already matched.
+ */
+const createParamConstraintMap = (paramConstraints) => {
+  const entries = Object.entries(paramConstraints);
+  if (entries.length === 0) {
+    return EMPTY_PARAM_CONSTRAINT_MAP;
+  }
+  const paramConstraintMap = new Map();
+  for (const [paramName, constraint] of entries) {
+    if (constraint instanceof RegExp) {
+      paramConstraintMap.set(paramName, (value) => {
+        constraint.lastIndex = 0; // a /g or /y regexp would otherwise resume where the previous test stopped
+        return constraint.test(value);
+      });
+      continue;
+    }
+    if (Array.isArray(constraint)) {
+      // a url segment is a string, so the list is compared as strings:
+      // `oneOf: [1, 2, 3]` accepts "/2"
+      const acceptedValueSet = new Set(
+        constraint.map((value) => String(value)),
+      );
+      paramConstraintMap.set(paramName, (value) => acceptedValueSet.has(value));
+      continue;
+    }
+    if (typeof constraint === "function") {
+      paramConstraintMap.set(paramName, (value) => Boolean(constraint(value)));
+      continue;
+    }
+    throw new TypeError(
+      `params.${paramName} must be a regexp, an array of values or a function, got ${constraint}`,
+    );
+  }
+  return paramConstraintMap;
+};
+
 /**
  * Parse a route pattern string into structured segments
  */
-const parsePattern = (pattern, { pathConnectionMap, queryConnectionMap }) => {
+const parsePattern = (
+  pattern,
+  {
+    pathConnectionMap,
+    queryConnectionMap,
+    paramConstraintMap = EMPTY_PARAM_CONSTRAINT_MAP,
+  },
+) => {
   // Build queryParams from queryConnectionMap
   const queryParams = [];
   for (const [paramName, connection] of queryConnectionMap) {
@@ -3878,13 +3956,14 @@ const parsePattern = (pattern, { pathConnectionMap, queryConnectionMap }) => {
       // 1. Explicitly marked with ?
       // 2. Has a default value
       // 3. Connected signal has undefined value and no explicit default (allows /map to match /map/:panel)
+      //    — unless the param is constrained: "no segment" is not one of the values it accepts
       const connection =
         pathConnectionMap.get(paramName) || queryConnectionMap.get(paramName);
       const hasDefault =
         connection && connection.getDefaultValue() !== undefined;
       let isOptional = seg.endsWith("?") || hasDefault;
 
-      if (!isOptional) {
+      if (!isOptional && !paramConstraintMap.has(paramName)) {
         // Check if connected signal has undefined value (making parameter optional for index routes)
         if (
           connection &&
@@ -3995,7 +4074,14 @@ const tryExtractChildParameters = (
       // We need to verify that this parameter isn't already captured by parent
       if (!(segment.name in existingParams)) {
         const urlSegment = remainingSegments[remainingIndex];
-        childParams[segment.name] = decodeURIComponent(urlSegment);
+        const paramValue = decodeURIComponent(urlSegment);
+        const paramConstraint = childPattern.paramConstraintMap.get(
+          segment.name,
+        );
+        if (paramConstraint && !paramConstraint(paramValue)) {
+          return null; // the child declines this value, it cannot explain these segments
+        }
+        childParams[segment.name] = paramValue;
         remainingIndex++;
       }
     } else if (
@@ -4022,7 +4108,14 @@ const tryExtractChildParameters = (
 const matchUrl = (
   parsedPattern,
   url,
-  { baseUrl, baseFileUrl, queryConnectionMap, patternObj = null },
+  {
+    baseUrl,
+    baseFileUrl,
+    queryConnectionMap,
+    paramConstraintMap = EMPTY_PARAM_CONSTRAINT_MAP,
+    exact = false,
+    patternObj = null,
+  },
 ) => {
   // Parse the URL
   const urlObj = new URL(url, baseUrl);
@@ -4064,7 +4157,7 @@ const matchUrl = (
     }
 
     // Root route with trailing slash matches all sub-paths (prefix matching, like other trailing-slash routes)
-    if (parsedPattern.trailingSlash) {
+    if (parsedPattern.trailingSlash && !exact) {
       return extractSearchParams(urlObj, queryConnectionMap);
     }
 
@@ -4133,7 +4226,12 @@ const matchUrl = (
 
       // Capture URL segment as parameter value
       const urlSeg = urlSegments[urlSegmentIndex];
-      params[patternSeg.name] = decodeURIComponent(urlSeg);
+      const paramValue = decodeURIComponent(urlSeg);
+      const paramConstraint = paramConstraintMap.get(patternSeg.name);
+      if (paramConstraint && !paramConstraint(paramValue)) {
+        return null; // the param declines this value: the route does not match
+      }
+      params[patternSeg.name] = paramValue;
       urlSegmentIndex++;
     }
   }
@@ -4142,8 +4240,7 @@ const matchUrl = (
   // Patterns with trailing slashes can match additional URL segments (like wildcards)
   // Patterns without trailing slashes should match exactly (unless they're wildcards)
   if (
-    !parsedPattern.wildcard &&
-    !parsedPattern.trailingSlash &&
+    (exact || (!parsedPattern.wildcard && !parsedPattern.trailingSlash)) &&
     urlSegmentIndex < urlSegments.length
   ) {
     return null; // Pattern without trailing slash/wildcard should not match extra segments
@@ -4862,8 +4959,61 @@ const getRoutePrivateProperties = (route) => {
 const ROUTE_NOT_MATCHING_PARAMS = {};
 // Flag to prevent signal-to-URL synchronization during URL-to-signal synchronization
 let isUpdatingRoutesFromUrl = false;
-const route = (pattern, { searchParams } = {}) => {
-  const routePattern = createRoutePattern(pattern, { searchParams });
+/**
+ * Declares a route from an url pattern.
+ *
+ * @param {string} pattern - The url pattern, where `:name` is a path param and
+ *   `:name=${signal}` binds that param to a signal.
+ * @param {object} [options]
+ * @param {Object<string, import("@preact/signals").Signal>} [options.searchParams]
+ *   Search params this route two-way syncs with, by name.
+ * @param {Object<string, RegExp | Array | ((value: string) => boolean)>} [options.params]
+ *   Which values a path param accepts, by param name: a regexp tested against the
+ *   decoded segment, the list of accepted values (compared as strings, so it can
+ *   be the `oneOf` of the signal bound to that param), or a predicate. A route
+ *   whose param declines the segment does not match at all: no signal is
+ *   written, `<Route fallback>` is reachable, and `/:gameId` can sit at the root
+ *   without swallowing `/cgu`. A constrained param is also required — no segment
+ *   is not one of the values it accepts — so `/:gameId` does not match `/`.
+ *
+ *   Constrain the shape, not the existence: whether that game exists is for the
+ *   route action and the page to answer, on a route that did match.
+ *
+ *   ```js
+ *   route(`/:gameId=${gamePageIdSignal}`, { params: { gameId: /^W-[A-Z0-9]{8}$/i } });
+ *   route(`/games/:section=${sectionSignal}`, { params: { section: SECTIONS } });
+ *   ```
+ * @param {object} [options.redirectRoute]
+ *   This address only sends elsewhere: the route it resolves to. The
+ *   redirection happens at the door of the navigation, so this address is never
+ *   displayed, never enters the history, runs no route action and writes no
+ *   signal — going back lands on the page before it, not on the redirection
+ *   again. It fires on this route's own address only: a trailing slash still
+ *   catches what lies below it for rendering, never for redirecting.
+ *
+ *   The params found in the url carry over to the ones the target route
+ *   declares under the same name; what it cannot place is left behind.
+ *
+ *   ```js
+ *   route("/", { redirectRoute: MY_GAMES_PAGE });
+ *   // gameId carries over on its own, shareState is not a param of GAME_PAGE
+ *   route("/:gameId/:shareState", { redirectRoute: GAME_PAGE });
+ *   ```
+ * @param {object|Function|null} [options.redirectRouteParams]
+ *   What to change about the params carried over: an object, or a function of
+ *   the params found in the url returning one. Written params win over inherited
+ *   ones, `undefined` drops one, and `null` carries nothing over at all.
+ *
+ *   ```js
+ *   route("/legacy/:id", { redirectRoute: GAME_PAGE, redirectRouteParams: ({ id }) => ({ gameId: id }) });
+ *   route("/:gameId/invite", { redirectRoute: HOME_PAGE, redirectRouteParams: null });
+ *   ```
+ */
+const route = (
+  pattern,
+  { searchParams, params, redirectRoute, redirectRouteParams } = {},
+) => {
+  const routePattern = createRoutePattern(pattern, { searchParams, params });
   const { cleanPattern } = routePattern;
   const [publishStatus, subscribeStatus] = createPubSub();
 
@@ -4906,6 +5056,8 @@ const route = (pattern, { searchParams } = {}) => {
   {
     const routePrivateProperties = {
       routePattern,
+      redirectRoute,
+      redirectRouteParams,
       setup: null,
       updateStatus: null,
       cleanup: null,
@@ -5229,6 +5381,113 @@ const route = (pattern, { searchParams } = {}) => {
 
 const [publishRouteMutations, observeRouteMutations] = createPubSub();
 
+let redirectingRouteSet = null;
+/**
+ * Where does this url really lead?
+ *
+ * Asked at the door of every navigation, before the url is written anywhere —
+ * an address that only sends elsewhere must not become a page, an entry in the
+ * history, or a route anything can see matching. Answered without reading a
+ * single signal: the url alone says it.
+ *
+ * The chain is followed here rather than by letting each redirection navigate
+ * in turn, so one navigation happens and the addresses in between leave no
+ * trace at all.
+ *
+ * @param {string} url
+ * @returns {string|null} The url to go to instead, or null.
+ */
+const resolveRouteRedirection = (url) => {
+  if (!redirectingRouteSet || redirectingRouteSet.size === 0) {
+    return null;
+  }
+  let urlToResolve = url;
+  let redirectionUrl = null;
+  const urlChain = [url];
+  while (true) {
+    const nextUrl = resolveRedirectionOnce(urlToResolve);
+    if (!nextUrl || nextUrl === urlToResolve) {
+      break;
+    }
+    if (urlChain.includes(nextUrl)) {
+      throw new Error(
+        `Redirection cycle: ${[...urlChain, nextUrl].join(" -> ")}`,
+      );
+    }
+    urlChain.push(nextUrl);
+    redirectionUrl = nextUrl;
+    urlToResolve = nextUrl;
+  }
+  return redirectionUrl;
+};
+const resolveRedirectionOnce = (url) => {
+  let redirectingRoute = null;
+  let redirectingRouteParams = null;
+  let maxDepth = -1;
+  for (const route of redirectingRouteSet) {
+    const { routePattern } = getRoutePrivateProperties(route);
+    // exact: what a trailing slash catches is what a container renders, not
+    // what an address redirects — "/" redirecting must not take "/cgu" with it
+    const urlParams = routePattern.applyOn(url, { exact: true });
+    if (!urlParams) {
+      continue;
+    }
+    // Deeper = more specific, the reading the whole router shares (see
+    // replaceParams): "/:gameId/invite" is a child of "/:gameId/:shareState",
+    // so it answers for an url both of them match.
+    if (routePattern.depth > maxDepth) {
+      maxDepth = routePattern.depth;
+      redirectingRoute = route;
+      redirectingRouteParams = urlParams;
+    }
+  }
+  if (!redirectingRoute) {
+    return null;
+  }
+  return buildRedirectionUrl(redirectingRoute, redirectingRouteParams);
+};
+const buildRedirectionUrl = (route, urlParams) => {
+  const { redirectRoute, redirectRouteParams } =
+    getRoutePrivateProperties(route);
+  const paramsCarriedOver =
+    redirectRouteParams === null
+      ? {}
+      : paramsTargetCanPlace(redirectRoute, urlParams);
+  if (!redirectRouteParams) {
+    return redirectRoute.buildUrl(paramsCarriedOver);
+  }
+  const paramsWritten =
+    typeof redirectRouteParams === "function"
+      ? redirectRouteParams(urlParams)
+      : redirectRouteParams;
+  // A param written as undefined is a param dropped: `paramName in params` is
+  // what tells a url build "this one is decided", value included (resolveParams)
+  return redirectRoute.buildUrl({ ...paramsCarriedOver, ...paramsWritten });
+};
+
+/**
+ * The params of the url being left that the target route can put somewhere:
+ * its own path segments and the search params it declares. What it cannot
+ * place would otherwise be appended to the url as a query param, and a share
+ * link resolving to "/W-ABC234PQ?shareState=1" is not the address anyone meant.
+ */
+const paramsTargetCanPlace = (redirectRoute, urlParams) => {
+  const { routePattern } = getRoutePrivateProperties(redirectRoute);
+  const { parsedPattern, queryConnectionMap } = routePattern;
+  const paramsCarriedOver = {};
+  for (const paramName of Object.keys(urlParams)) {
+    const canPlace =
+      queryConnectionMap.has(paramName) ||
+      parsedPattern.segments.some(
+        (segment) => segment.type === "param" && segment.name === paramName,
+      );
+    if (canPlace) {
+      paramsCarriedOver[paramName] = urlParams[paramName];
+    }
+  }
+  return paramsCarriedOver;
+};
+
 let setupRoutesCalled = false;
 const setupRoutes = (routes) => {
   if (setupRoutesCalled) {
@@ -5258,6 +5517,22 @@ This prevents cross-test pollution and ensures clean state.`,
     setup({ routeSet, getUrl });
   }
 
+  // Checked here rather than at declaration: a route may redirect to one
+  // declared after it, and reading the target then would forbid that order.
+  redirectingRouteSet = new Set();
+  for (const route of routeSet) {
+    const { redirectRoute } = getRoutePrivateProperties(route);
+    if (!redirectRoute) {
+      continue;
+    }
+    if (!redirectRoute.isRoute) {
+      throw new TypeError(
+        `${route} redirects to ${redirectRoute}, expecting a route object`,
+      );
+    }
+    redirectingRouteSet.add(route);
+  }
+
   // Store previous route states to detect changes
   const routePreviousStateMap = new WeakMap();
   const updateRoutes = (
@@ -5501,6 +5776,7 @@ This prevents cross-test pollution and ensures clean state.`,
       routePrivatePropertiesMap.delete(route);
     }
     routeSet.clear();
+    redirectingRouteSet = null;
     setupRoutesCalled = false;
   };
   return {
@@ -9711,7 +9987,7 @@ const formatDateIso = (iso, inputType) => {
 const READONLY_CONSTRAINT = {
   name: "readonly",
   messageAttribute: "data-readonly-message",
-  check: (field) => {
+  check: (field, { intent } = {}) => {
     const readOnly = Boolean(
       field.controlHostProps.readOnly ||
       field.controlHostProps["aria-readonly"] === "true",
@@ -9720,6 +9996,18 @@ const READONLY_CONSTRAINT = {
       return null;
     }
 
+    // Read-only, and what it opens still opens: a picker's answer often lives
+    // in a shape only its popup draws — a plan with one tile ringed, a wheel
+    // stopped on a time — and refusing to open leaves that shape unreadable.
+    // Opening reads and nothing more, so it goes through; everything that would
+    // write is refused below, and the popup content is handed the same
+    // read-only state so each control in there refuses on its own terms. Which
+    // controls say so, and when, is theirs to answer (see createControlInfo's
+    // readOnlyOpens).
+    if (intent === "read" && field.readOnlyOpens) {
+      return null;
+    }
+
     // A selection guarding its length (see maxLengthGuard) is what holds this
     // one back, so max_length is what refuses it: same name, same message, same
     // `maxLengthMessage` to say it in the caller's own words. Read-only is only
@@ -9784,6 +10072,8 @@ const readOnlyMessage = (field) => {
  *   → "navi_request_interaction" event
  *   → onRequestInteraction
  *       → check disabled / read-only / busy (via controller.controlInteraction)
+ *         against the interaction's `intent` ("write" by default, "read" for one
+ *         that only shows what is already there — see READONLY_CONSTRAINT)
  *       → if blocked  → prevented()
  *       → if allowed  → allowed()
  *         → (in allowed callback) setUIState(value)
@@ -9817,10 +10107,10 @@ const createControlInteraction = (
   // The title this rule put on the element, if any (see checkInteractivity).
   let titleWritten = null;
 
-  const checkInteractivity = ({ event } = {}) => {
+  const checkInteractivity = ({ event, intent = "write" } = {}) => {
     interactionFailedConstraintInfo = null;
     for (const constraint of INTERACTION_CONSTRAINT_SET) {
-      const checkResult = constraint.check(controller);
+      const checkResult = constraint.check(controller, { intent });
       if (!checkResult) {
         continue;
       }
@@ -9847,7 +10137,7 @@ const createControlInteraction = (
         if (!mci) {
           continue;
         }
-        const canInteract = mci.checkInteractivity({ event });
+        const canInteract = mci.checkInteractivity({ event, intent });
         if (canInteract) {
           continue;
         }
@@ -9861,8 +10151,14 @@ const createControlInteraction = (
     }
 
     // Keep title attribute in sync for accessibility.
+    // Only off a check that asked the general question: a title is read
+    // whenever a pointer rests on the element, so it says what is true of the
+    // control as a whole. A check made for an interaction that only reads (a
+    // read-only picker asked to open its popup) answers about that one
+    // interaction — writing the title from it would take away the "read-only"
+    // the first time someone opened the popup.
     const titleLess = !controller.controlHostProps?.title;
-    if (titleLess) {
+    if (intent === "write" && titleLess) {
       const element = controller.ref.current;
       if (element) {
         if (interactionFailedConstraintInfo) {
@@ -9968,6 +10264,12 @@ const onRequestInteraction = (
   const {
     event,
     name,
+    // What this interaction would do to the control: write it, or only read it.
+    // Everything writes unless it says otherwise — an interaction that merely
+    // shows what is already there (opening a picker's popup, closing it again)
+    // says "read", and that is what a control held read-only can still let
+    // through (see READONLY_CONSTRAINT).
+    intent = "write",
     bypassInteractivity = false,
     prevented,
     allowed,
@@ -9998,7 +10300,7 @@ const onRequestInteraction = (
   if (controller && !bypassInteractivity) {
     const ci = controller?.rules.interaction;
     if (ci) {
-      const canInteract = ci.checkInteractivity({ event });
+      const canInteract = ci.checkInteractivity({ event, intent });
       if (!canInteract) {
         const failedInfo =
           ci.interactionFailedConstraintInfo ??
@@ -21522,6 +21824,24 @@ const setupBrowserIntegrationViaHistory = ({
     // the single door every navigation goes through, rather than by each caller
     // (navBack's fallback in particular arrives here raw).
     const url = new URL(target, window.location.href).href;
+    // An address that only sends elsewhere never becomes anything here: asked
+    // before the announcement, before the history write and before the routes,
+    // so that what follows is entirely about where the reader is going (see
+    // resolveRouteRedirection).
+    const redirectionUrl = resolveRouteRedirection(url);
+    if (redirectionUrl) {
+      if (redirectionUrl === window.location.href) {
+        // Asked to go where we already are: an address that redirects is never
+        // the one being displayed, so there is nothing to go to and nothing to
+        // stack on the history.
+        return undefined;
+      }
+      return handleRoutingTask(redirectionUrl, {
+        ...options,
+        reason: `${options.reason} (redirected from ${url})`,
+        redirected: true,
+      });
+    }
     // Decided before anything is announced: an elided push IS the traversal it
     // becomes, and the traversal will make its own announcements when the
     // browser answers — a before/after cycle here would be about a navigation
@@ -21570,6 +21890,7 @@ const setupBrowserIntegrationViaHistory = ({
       reason,
       navigationType, // "load", "reload", "replace", "push", "traverse"
       state,
+      redirected,
     } = options;
 
     // Where the entry being reached stands in this document's own stack —
@@ -21612,6 +21933,14 @@ const setupBrowserIntegrationViaHistory = ({
     } else {
       // traverse / reload: state comes from the history entry, no push/replace needed.
       markUrlAsVisited(url);
+      if (redirected) {
+        // The entry the browser is on names an address that only sends
+        // elsewhere — a cold load on it, or a back into it. Written over where
+        // it stands (the entry keeps its place in the stack, hence its state
+        // and the depth in it): pressing back must not walk into it again.
+        window.history.replaceState(state, null, url);
+        rememberEntryIsOfThisDocument();
+      }
       updateDocumentUrl(url);
       updateDocumentState(state);
     }
@@ -26412,6 +26741,7 @@ const useControlProps = (props, {
       }
       const {
         name,
+        intent,
         bypassInteractivity = false,
         allowed,
         prevented,
@@ -26421,6 +26751,7 @@ const useControlProps = (props, {
       return dispatchRequestInteraction(control, {
         event: e,
         name,
+        intent,
         bypassInteractivity,
         prevented: () => {
           debugInteraction(e, `interaction not allowed`);
@@ -26560,6 +26891,7 @@ const createControlInfo = (props, {
   let defaultStatePropName;
   let stateInitial;
   let readOnlySupported = false;
+  let readOnlyOpens = false;
   let disabledSupported = false;
   let hasStateProp;
   let value;
@@ -26646,6 +26978,14 @@ const createControlInfo = (props, {
     // aria-readonly plus a refused interaction — see the select reactions in
     // getDefaultEventReactionDefinitions.
     readOnlySupported = controlType === "picker" && INPUT_TYPE_SUPPORTING_READONLY_SET.has(typeProp);
+    // A picker's popup is content of its own — a plan with one tile ringed, a
+    // wheel stopped on a time, a list showing what was chosen — so read-only
+    // does not close it: it opens, and everything in it is held read-only in
+    // turn (see the ReadOnlyContext in picker.jsx). Two pickers this is not
+    // true of: one with no popup of its own, which opens the browser's and
+    // cannot hold that read-only (see PickerNative), and one whose caller says
+    // its popup is a form with nothing to read (openWhileReadOnly={false}).
+    readOnlyOpens = controlType === "picker" && props.children !== undefined && props.openWhileReadOnly !== false;
   }
 
   // The suggestion the control starts on, as opposed to what it holds — what a
@@ -26672,6 +27012,7 @@ const createControlInfo = (props, {
     signalHoldsChecked,
     stateFromSignal,
     readOnlySupported,
+    readOnlyOpens,
     disabledSupported
   };
 };
@@ -27022,6 +27363,10 @@ const useInteractiveProps = (props, {
     const actionLoading = optimistic ? false : actionStatus.loading;
     const loadingResolved = loadingBase || actionLoading;
     const readOnlyResolved = readOnlyBase || actionLoading;
+    // Read-only, and what this control opens still opens: reading what is in
+    // there changes nothing. Read by READONLY_CONSTRAINT, which lets an
+    // interaction that only reads through on it.
+    uiStateController.readOnlyOpens = Boolean(controlInfo.readOnlyOpens);
     // Both halves of "busy" that do not come from the bound action, kept apart
     // from each other and from it: BUSY_CONSTRAINT answers each from its own
     // live source rather than from the rendered aria-busy, which conflates all
@@ -47385,7 +47730,27 @@ installImportMetaCssBuild(import.meta);const css$J = /* css */`
     border-width: var(--border-width);
     border-style: solid;
     border-color: var(--x-border-color);
-    border-radius: var(--border-radius);
+    /* Squared from the outside, corner by corner: a checkbox in a group can
+       arrive wrapped (in a label, in a row carrying a state), and the ask then
+       travels down as inherited custom properties rather than as a radius
+       landing on this element. Each corner falls back to the checkbox's own
+       radius when nothing asks for anything. */
+    border-top-left-radius: var(
+      --x-corner-top-left-radius,
+      var(--border-radius)
+    );
+    border-top-right-radius: var(
+      --x-corner-top-right-radius,
+      var(--border-radius)
+    );
+    border-bottom-right-radius: var(
+      --x-corner-bottom-right-radius,
+      var(--border-radius)
+    );
+    border-bottom-left-radius: var(
+      --x-corner-bottom-left-radius,
+      var(--border-radius)
+    );
     outline-width: var(--outline-width);
     outline-style: none;
     outline-color: var(--outline-color);
@@ -48351,7 +48716,26 @@ installImportMetaCssBuild(import.meta);const css$H = /* css */`
       border-width: var(--button-border-width);
       border-style: solid;
       border-color: var(--x-border-color);
-      border-radius: var(--button-border-radius);
+      /* Squared from the outside, corner by corner: a row of these is the
+         segmented control a Group is for, and one of them can arrive wrapped
+         (in a tooltip, in a label) — so the ask travels down as inherited
+         custom properties rather than as a radius landing on this element. */
+      border-top-left-radius: var(
+        --x-corner-top-left-radius,
+        var(--button-border-radius)
+      );
+      border-top-right-radius: var(
+        --x-corner-top-right-radius,
+        var(--button-border-radius)
+      );
+      border-bottom-right-radius: var(
+        --x-corner-bottom-right-radius,
+        var(--button-border-radius)
+      );
+      border-bottom-left-radius: var(
+        --x-corner-bottom-left-radius,
+        var(--button-border-radius)
+      );
 
       .navi_icon,
       img {
@@ -48660,6 +49044,28 @@ installImportMetaCssBuild(import.meta);const css$G = /* css */`
     --x-thumb-color: var(--thumb-color);
     --x-thumb-border: none;
     --x-thumb-cursor: var(--thumb-cursor);
+    /* Squared from the outside, corner by corner — resolved here once because
+       what draws the frame is not this element but the three layers stacked
+       below it (background, track, fill), which cannot take it by inherit the
+       way a control with a single frame does. A range can arrive wrapped, so
+       the ask travels down as inherited custom properties; each corner falls
+       back to the track's own radius when nothing asks for anything. */
+    --x-range-corner-top-left: var(
+      --x-corner-top-left-radius,
+      var(--border-radius)
+    );
+    --x-range-corner-top-right: var(
+      --x-corner-top-right-radius,
+      var(--border-radius)
+    );
+    --x-range-corner-bottom-right: var(
+      --x-corner-bottom-right-radius,
+      var(--border-radius)
+    );
+    --x-range-corner-bottom-left: var(
+      --x-corner-bottom-left-radius,
+      var(--border-radius)
+    );
 
     position: relative;
     box-sizing: border-box;
@@ -48668,10 +49074,26 @@ installImportMetaCssBuild(import.meta);const css$G = /* css */`
     margin: 2px;
     flex-direction: row;
     align-items: center;
-    /* Just for the outline, the real border radius of the range is fixed */
     font-size: var(--font-size);
     font-family: var(--font-family);
-    border-radius: var(--outline-border-radius);
+    /* The ring around the whole control, which follows the claim too: a range
+       squared along a seam must not keep a rounded ring over it. */
+    border-top-left-radius: var(
+      --x-corner-top-left-radius,
+      var(--outline-border-radius)
+    );
+    border-top-right-radius: var(
+      --x-corner-top-right-radius,
+      var(--outline-border-radius)
+    );
+    border-bottom-right-radius: var(
+      --x-corner-bottom-right-radius,
+      var(--outline-border-radius)
+    );
+    border-bottom-left-radius: var(
+      --x-corner-bottom-left-radius,
+      var(--outline-border-radius)
+    );
     outline-width: var(--outline-width);
     outline-style: none;
     outline-color: var(--outline-color);
@@ -48712,7 +49134,10 @@ installImportMetaCssBuild(import.meta);const css$G = /* css */`
       border-width: var(--border-width);
       border-style: solid;
       border-color: var(--x-border-color);
-      border-radius: var(--border-radius);
+      border-top-left-radius: var(--x-range-corner-top-left);
+      border-top-right-radius: var(--x-range-corner-top-right);
+      border-bottom-right-radius: var(--x-range-corner-bottom-right);
+      border-bottom-left-radius: var(--x-range-corner-bottom-left);
     }
     .navi_input_range_track {
       position: absolute;
@@ -48722,7 +49147,10 @@ installImportMetaCssBuild(import.meta);const css$G = /* css */`
       border-width: var(--border-width);
       border-style: solid;
       border-color: var(--x-track-border-color);
-      border-radius: var(--border-radius);
+      border-top-left-radius: var(--x-range-corner-top-left);
+      border-top-right-radius: var(--x-range-corner-top-right);
+      border-bottom-right-radius: var(--x-range-corner-bottom-right);
+      border-bottom-left-radius: var(--x-range-corner-bottom-left);
     }
     .navi_input_range_fill {
       position: absolute;
@@ -48730,7 +49158,10 @@ installImportMetaCssBuild(import.meta);const css$G = /* css */`
       height: var(--height);
       background: var(--x-fill-color);
       background-clip: content-box;
-      border-radius: var(--border-radius);
+      border-top-left-radius: var(--x-range-corner-top-left);
+      border-top-right-radius: var(--x-range-corner-top-right);
+      border-bottom-right-radius: var(--x-range-corner-bottom-right);
+      border-bottom-left-radius: var(--x-range-corner-bottom-left);
       clip-path: inset(0 calc((1 - var(--x-fill-ratio)) * 100%) 0 0);
     }
     .navi_input_range_thumb {
@@ -49802,7 +50233,27 @@ const inputCss = /* css */`
     border-width: var(--border-width);
     border-style: solid;
     border-color: var(--x-border-color);
-    border-radius: var(--border-radius);
+    /* Squared from the outside, corner by corner: an input is not always the
+       member a Group joins — it can arrive wrapped (in a Box carrying a state,
+       in a tooltip) — so the ask travels down as inherited custom properties
+       rather than as a radius landing on this element. Each corner falls back
+       to the input's own radius when nothing asks for anything. */
+    border-top-left-radius: var(
+      --x-corner-top-left-radius,
+      var(--border-radius)
+    );
+    border-top-right-radius: var(
+      --x-corner-top-right-radius,
+      var(--border-radius)
+    );
+    border-bottom-right-radius: var(
+      --x-corner-bottom-right-radius,
+      var(--border-radius)
+    );
+    border-bottom-left-radius: var(
+      --x-corner-bottom-left-radius,
+      var(--border-radius)
+    );
     outline-width: var(--outline-width);
     outline-color: var(--outline-color);
     outline-offset: var(--outline-offset);
@@ -51543,7 +51994,7 @@ const css$E = /* css */`
        positioned element to mean anything, hence position: relative.
        Deliberately not paired with isolation: isolate — a stacking context
        here would also trap the popup of a picker held in the group, which
-       counts on its own band reaching the whole page. What keeps these two
+       counts on its own band reaching the whole page. What keeps these
        values from escaping is instead that everything they could reach is a
        band above them (see navi_z_indexes.js). */
     > *:hover,
@@ -51563,6 +52014,25 @@ const css$E = /* css */`
       position: relative;
       z-index: var(--navi-z-index-control-focused);
     }
+    /* The member holding something open. Neither of the two above covers it:
+       the click that opened the popup gives no focus ring, the focus itself
+       left for the popup's content, and the pointer is free to travel to a
+       neighbour — yet the member keeps the border color its open state gives
+       it, and that border is exactly what the neighbour painted after it
+       slices. Read as a state, not as a pseudo-class: :active only lasts as
+       long as the button is held down, and while it is held :hover is true
+       anyway, so it would add nothing here.
+
+       :has, for the same reason as focus-visible above — the group member can
+       be an enrobage around the control that expands — and reaching a popup
+       held inline (a Popover with layer="local" renders inside its member)
+       costs nothing: that popup only reads expanded while its own member is,
+       which is the member this raises. */
+    > *[aria-expanded="true"],
+    > *:has([aria-expanded="true"]) {
+      position: relative;
+      z-index: var(--navi-z-index-control-expanded);
+    }
 
     /* Horizontal (default): Cumulative margin for border overlap */
     &:not([data-vertical]) {
@@ -55490,6 +55960,14 @@ const PickerNative = props => {
       dispatchRequestInteraction(pickerInput, {
         event: e,
         name: "navi_request_open to show native picker",
+        // No "read" intent here, unlike a picker holding a popup of its own
+        // (see PickerCustom): the browser's picker cannot be held read-only,
+        // whichever way its type falls. Where `readonly` applies (date, time,
+        // month, number…) the input is not mutable and showPicker() refuses
+        // it — there is nothing to open. Where it does not (color, file) the
+        // browser opens all the same and writes whatever is chosen straight
+        // into the input, which is read-only in name only. So a read-only
+        // native picker says why instead, on the trigger.
         prevented: () => {
           e.preventDefault();
         },
@@ -55680,14 +56158,20 @@ const PickerCustom = props => {
             // already what it is, and this only re-runs the same reaction.
             const inputEl = getPickerInput(ref.current);
             const valueAtClose = getUIStateFromElement(inputEl);
-            if (valueAtOpen === undefined && compareTwoJsValues(valueAtClose, valueAtOpen)) {
+            const controller = inputEl?.__uiStateController__;
+            if (controller?.controlHostProps.readOnly) {
+              // Opened only to be read: what it shows stays the suggestion it
+              // was. A look is not an answer, and the signal behind it is not
+              // written by one.
+              debugPopup(closeEvent, `picker is read-only -> nothing to commit`);
+            } else if (valueAtOpen === undefined && compareTwoJsValues(valueAtClose, valueAtOpen)) {
               // Same third case onRequestClose steps around: nothing held,
               // nothing shown, nothing picked. There is no suggestion here to
               // turn into an answer.
               debugPopup(closeEvent, `picker showed nothing -> nothing to commit`);
             } else {
               debugPopup(closeEvent, `picker defined a suggestion -> commit it`);
-              commitUIStateAsAnswer(inputEl?.__uiStateController__, closeEvent);
+              commitUIStateAsAnswer(controller, closeEvent);
             }
           }
           leaveExpanded({
@@ -55776,6 +56260,13 @@ const PickerCustom = props => {
         requestInteraction({
           event: e,
           name: "navi_request_open_event",
+          // Showing what the picker already holds, in the shape only the popup
+          // draws it in — nothing of the value is written on the way in, nor on
+          // the way out. Every interaction below says the same, which is what
+          // lets a read-only picker be opened and read while everything that
+          // would write it (paste, cut, the clear cross) stays refused. See
+          // READONLY_CONSTRAINT.
+          intent: "read",
           allowed: () => {
             requestOpen(e);
           }
@@ -55784,6 +56275,7 @@ const PickerCustom = props => {
       onnavi_request_close: e => {
         requestInteraction({
           event: e,
+          intent: "read",
           allowed: () => {
             requestClose(e, {
               isCancel: e.detail.isCancel
@@ -55802,6 +56294,7 @@ const PickerCustom = props => {
         "a-z": e => {
           return {
             name: "letter key to open",
+            intent: "read",
             allowed: () => {
               requestOpen(e);
             }
@@ -55810,6 +56303,7 @@ const PickerCustom = props => {
         "0-9": e => {
           return {
             name: "numeric key to open",
+            intent: "read",
             allowed: () => {
               requestOpen(e);
             }
@@ -55818,6 +56312,7 @@ const PickerCustom = props => {
         "arrowdown": e => {
           return {
             name: "arrow_down_to_open",
+            intent: "read",
             allowed: () => {
               requestOpen(e);
               e.preventDefault(); // prevent container scroll
@@ -55827,6 +56322,7 @@ const PickerCustom = props => {
         "arrowup": e => {
           return {
             name: "arrow_up_to_open",
+            intent: "read",
             allowed: () => {
               requestOpen(e);
               e.preventDefault(); // prevent container scroll
@@ -55836,6 +56332,7 @@ const PickerCustom = props => {
         "space": e => {
           return {
             name: "space_to_open",
+            intent: "read",
             allowed: () => {
               requestOpen(e);
               e.preventDefault(); // prevent scroll
@@ -55850,6 +56347,7 @@ const PickerCustom = props => {
           }
           return {
             name: "enter_to_open",
+            intent: "read",
             allowed: () => {
               requestOpen(e);
               e.preventDefault(); // prevent form submission
@@ -55863,6 +56361,7 @@ const PickerCustom = props => {
           const isCancel = escapeEffect === "cancel";
           return {
             name: isCancel ? "escape_to_cancel" : "escape_to_close",
+            intent: "read",
             allowed: () => {
               requestClose(e, {
                 isCancel
@@ -55894,6 +56393,7 @@ const PickerCustom = props => {
               // choice being taken from anyone.
               return {
                 name: "mousedown to close picker",
+                intent: "read",
                 allowed: () => requestClose(e, {
                   isCancel: true
                 })
@@ -55904,6 +56404,7 @@ const PickerCustom = props => {
             }
             return {
               name: "mousedown to open picker",
+              intent: "read",
               allowed: () => {
                 debugFocus(e, `prevent browser giving focus to button (mousedown.preventDefault())`);
                 requestOpen(e);
@@ -55921,6 +56422,7 @@ const PickerCustom = props => {
             // above), this is where the picker opens for real.
             return {
               name: e.detail === 0 ? "click (keyboard or progammatic) to open picker" : "click to open picker",
+              intent: "read",
               prevented: () => {
                 e.preventDefault();
               },
@@ -62885,10 +63387,39 @@ installImportMetaCssBuild(import.meta);const css$u = /* css */`
     /* The frame is drawn by the box, but its radius is declared here, on the
        control root, like every other navi control does — so anything styling
        the picker from the outside (a Group squaring the corners it joins) has
-       one element to talk to, and the box follows. */
-    border-radius: var(--picker-border-radius);
+       one element to talk to, and the box follows.
+       Corner by corner rather than as the shorthand: a picker is not always
+       the member a Group joins — it can arrive wrapped (in a Box carrying a
+       state, in a link, in a tooltip), and the ask then travels down as
+       inherited custom properties instead of landing on this element as a
+       radius. Each corner falls back to the picker's own radius when nothing
+       asks for anything. */
+    border-top-left-radius: var(
+      --x-corner-top-left-radius,
+      var(--picker-border-radius)
+    );
+    border-top-right-radius: var(
+      --x-corner-top-right-radius,
+      var(--picker-border-radius)
+    );
+    border-bottom-right-radius: var(
+      --x-corner-bottom-right-radius,
+      var(--picker-border-radius)
+    );
+    border-bottom-left-radius: var(
+      --x-corner-bottom-left-radius,
+      var(--picker-border-radius)
+    );
 
     .navi_picker_box {
+      /* The ask stops here: this element is the picker's frame, so nothing it
+         holds is at the seam — the chevron and the clear cross in the slot, a
+         button in a custom UI. */
+      --x-corner-top-left-radius: initial;
+      --x-corner-top-right-radius: initial;
+      --x-corner-bottom-right-radius: initial;
+      --x-corner-bottom-left-radius: initial;
+
       position: relative;
       display: inline-flex;
       box-sizing: border-box;
@@ -62940,14 +63471,6 @@ installImportMetaCssBuild(import.meta);const css$u = /* css */`
       }
     }
     .navi_picker_right_slot {
-      /* A corner claimed from the outside (see group.jsx) is the frame's, and
-         what lives in here is not the frame — a button in a slot, the content
-         of a popup — so the ask stops at this boundary. */
-      --x-corner-top-left-radius: initial;
-      --x-corner-top-right-radius: initial;
-      --x-corner-bottom-right-radius: initial;
-      --x-corner-bottom-left-radius: initial;
-
       display: inline-flex;
       height: 1em;
       height: 1lh;
@@ -63042,6 +63565,15 @@ installImportMetaCssBuild(import.meta);const css$u = /* css */`
     }
 
     .navi_picker_content {
+      /* The other side of the frame: what a picker holds here is what its
+         popup shows, and a popup is never at a seam. Popover and Dialog stop
+         the ask at their own root too — this covers content that reaches the
+         popup through neither. */
+      --x-corner-top-left-radius: initial;
+      --x-corner-top-right-radius: initial;
+      --x-corner-bottom-right-radius: initial;
+      --x-corner-bottom-left-radius: initial;
+
       display: contents;
       text-align: initial; /* Don't inherit picker text align */
     }
@@ -63059,6 +63591,12 @@ installImportMetaCssBuild(import.meta);const css$u = /* css */`
       --x-picker-icon-color: var(--picker-icon-color-readonly);
       --x-picker-cursor: default;
     }
+    /* Read-only and still opening, so it still says so under the pointer.
+       Before the disabled block below on purpose: a disabled picker opens
+       nothing, read-only or not. */
+    &[data-readonly-opens] {
+      --x-picker-cursor: pointer;
+    }
     /* Focus */
     &[data-focus-within]:has(.navi_picker_input[data-focus-visible]) {
       --x-picker-border-color: transparent;
@@ -63187,6 +63725,7 @@ const PickerButton = props => {
     // untouched (see the --navi-clear command).
     clearConfirm,
     clearConfirmPopupContent,
+    readOnly,
     error
   } = props;
   const isSingleLine = maxLines === 1;
@@ -63204,6 +63743,19 @@ const PickerButton = props => {
     children
   } = inputProps;
   const loading = basePseudoState[":-navi-loading"];
+  // The same chain useControlProps resolves (own prop first, then what the
+  // group above says), for the two things it does not carry: the popup content,
+  // which is read-only along with the picker, and the cursor, which stays a
+  // pointer on a picker that still opens.
+  const readOnlyFromAbove = useContext(ReadOnlyContext);
+  const readOnlyResolved = readOnly || readOnlyFromAbove;
+  // Read off the controller rather than worked out again: what makes a
+  // read-only picker open is settled once, where the gate reads it (see
+  // createControlInfo's readOnlyOpens). Needed here for the cursor.
+  const readOnlyOpens = Boolean(readOnlyResolved) && uiStateController.readOnlyOpens;
+  // Whether anything can still be changed — read by the clear cross below,
+  // clearing being a modification like any other.
+  const interactive = !basePseudoState[":disabled"] && !basePseudoState[":read-only"] && !loading;
   usePickerErrorCallout(uiStateController, error);
   return jsxs(Box, {
     as: "div",
@@ -63222,6 +63774,7 @@ const PickerButton = props => {
     "navi-picker": "",
     "navi-single-line": isSingleLine ? "" : undefined,
     "navi-ui-custom": ui === "default" ? undefined : "",
+    "data-readonly-opens": readOnlyOpens ? "" : undefined,
     "data-popup-width-fit-content": popupWidthFitContent ? "" : undefined,
     ...pickerRemainingProps,
     basePseudoState: basePseudoState,
@@ -63232,6 +63785,7 @@ const PickerButton = props => {
     rightSlot: undefined,
     clearConfirm: undefined,
     clearConfirmPopupContent: undefined,
+    openWhileReadOnly: undefined,
     ui: undefined,
     maxLines: undefined,
     popupWidthFitContent: undefined,
@@ -63350,7 +63904,7 @@ const PickerButton = props => {
           value: undefined,
           children: jsx(ControlNameContext.Provider, {
             value: undefined,
-            children: clearable && value !== undefined && value !== "" ? jsx(Button, {
+            children: clearable && interactive && value !== undefined && value !== "" ? jsx(Button, {
               command: "--navi-clear",
               commandFor: inputProps.id
               // The question, asked before the clear rather than by the
@@ -63403,9 +63957,12 @@ const PickerButton = props => {
       })]
     }), jsx(ControlFacadeChildrenWrapper, {
       ...facadeChildrenProps,
-      children: jsx("div", {
-        className: "navi_picker_content",
-        children: children
+      children: jsx(ReadOnlyContext.Provider, {
+        value: readOnlyResolved,
+        children: jsx("div", {
+          className: "navi_picker_content",
+          children: children
+        })
       })
     })]
   });
@@ -63664,7 +64221,27 @@ const css$t = /* css */`
        of one's own still wins — an inline style beats a stylesheet. */
     border: var(--navi-control-border-width) solid
       var(--navi-control-border-color);
-    border-radius: var(--navi-control-border-radius);
+    /* Squared from the outside, corner by corner: a spin is not always the
+       member a Group joins — it can arrive wrapped — so the ask travels down
+       as inherited custom properties rather than as a radius landing on this
+       element. The chevrons take these corners back by inherit (see below), so
+       they follow. */
+    border-top-left-radius: var(
+      --x-corner-top-left-radius,
+      var(--navi-control-border-radius)
+    );
+    border-top-right-radius: var(
+      --x-corner-top-right-radius,
+      var(--navi-control-border-radius)
+    );
+    border-bottom-right-radius: var(
+      --x-corner-bottom-right-radius,
+      var(--navi-control-border-radius)
+    );
+    border-bottom-left-radius: var(
+      --x-corner-bottom-left-radius,
+      var(--navi-control-border-radius)
+    );
     outline-width: var(--navi-focus-outline-width);
     /* Just outside the border, never on it: the ring belongs to the whole
        control — the two chevrons included, since pressing one lands the
@@ -63721,6 +64298,13 @@ const css$t = /* css */`
      opens its calendar. Around the whole control it would open under a chevron;
      around the value it opens under the value one pressed. */
   .navi_picker_spin_middle {
+    /* The ask stops here: the frame is the spin's box, and the picker or the
+       field standing in the middle of it is behind that frame, not at a seam. */
+    --x-corner-top-left-radius: initial;
+    --x-corner-top-right-radius: initial;
+    --x-corner-bottom-right-radius: initial;
+    --x-corner-bottom-left-radius: initial;
+
     position: relative;
     display: flex;
     min-width: 0;
@@ -63898,7 +64482,26 @@ const css$t = /* css */`
     font-family: var(--navi-control-font-family);
     border: var(--navi-control-border-width) solid
       var(--navi-control-border-color);
-    border-radius: var(--navi-control-border-radius);
+    /* Squared from the outside, corner by corner (see .navi_picker_spin
+       above): the group is the member a Group joins, and it can arrive
+       wrapped. The spins inside give their radius up and take the corners of
+       this one back through inherit, so they follow. */
+    border-top-left-radius: var(
+      --x-corner-top-left-radius,
+      var(--navi-control-border-radius)
+    );
+    border-top-right-radius: var(
+      --x-corner-top-right-radius,
+      var(--navi-control-border-radius)
+    );
+    border-bottom-right-radius: var(
+      --x-corner-bottom-right-radius,
+      var(--navi-control-border-radius)
+    );
+    border-bottom-left-radius: var(
+      --x-corner-bottom-left-radius,
+      var(--navi-control-border-radius)
+    );
     outline-width: var(--navi-focus-outline-width);
     outline-color: var(--navi-focus-outline-color);
     outline-offset: 0px;