@jsenv/navi 0.29.154 → 0.29.156

package/dist/jsenv_navi.js

@@ -5432,6 +5432,11 @@ const CONTROL_ATTRIBUTE_SET = new Set([
   "spellcheck",
   "autoCorrect",
   "aria-controls",
+  // The name goes where the role is: the root box has none, so an aria-label
+  // left on it names nothing at all, while the host is what the user focuses
+  // and what a screen reader announces (and what getByRole({ name }) reads).
+  "aria-label",
+  "aria-labelledby",
   "tabIndex",
   "command",
   "commandFor",
@@ -6419,6 +6424,11 @@ const css$12 = /* css */`
  * @param {Object} options - Configuration options
  * @param {HTMLElement} [options.anchorElement] - Element the callout should follow. If not provided or too big, callout will be centered in viewport
  * @param {string} [options.status=""] - Callout status: "info" | "warning" | "error" | "success"
+ * @param {string} [options.testId] - `data-testid` on the callout element. The callout is
+ *   drawn by navi, so nothing the caller renders can carry the name a test needs — same
+ *   situation as a picker's `popupTestId` (see docs/testid.md). A role is already there
+ *   for free (`status`/`alert`); reach for this when the role is not enough to tell two
+ *   callouts apart.
  * @param {Function} [options.onClose] - Callback when callout is closed
  * @param {boolean} [options.closeOnClickOutside] - Whether to close on outside clicks (defaults to true for "info" status)
  * @param {boolean} [options.icon=true] - Whether the status icon is shown beside the message.
@@ -6465,6 +6475,7 @@ const openCallout = (message, {
   // "success" - positive feedback (e.g., "Changes saved successfully")
   // "" - neutral information
   status = "",
+  testId,
   onClose,
   closeOnClickOutside = status === "info",
   closeOnFocusLeave = closeOnClickOutside,
@@ -6642,6 +6653,15 @@ const openCallout = (message, {
         calloutElement.removeAttribute("data-icon");
       }
     }
+    if (Object.hasOwn(options, "testId")) {
+      // Per message, like the cross below: a callout is a slot several things
+      // speak through, and the one speaking is what a test is looking at.
+      if (options.testId) {
+        calloutElement.setAttribute("data-testid", options.testId);
+      } else {
+        calloutElement.removeAttribute("data-testid");
+      }
+    }
     if (Object.hasOwn(options, "closeButton")) {
       // Per message rather than per callout: what replaces a message (a
       // constraint taking over a tooltip's callout) brings its own cross back.
@@ -7042,6 +7062,7 @@ const openCallout = (message, {
   }
   update(message, {
     status,
+    testId,
     icon,
     closeButton
   });
@@ -7073,12 +7094,19 @@ const ARROW_SPACING = 8;
 // (closest "[aria-expanded]", see commands.js): a button inside the callout
 // closes the callout, not the picker or dialog around it. Never "false" — a
 // closed callout is removed, not kept.
+//
+// role="status" is the floor, not the final value: a message appearing without
+// the user asking for it is a live region, and a callout carrying no status at
+// all still owes one. A status raises it (the addStatusEffect swapping in
+// "alert" for warning/error), and it is also the name a test reaches the
+// callout by — navi's classes and ids are not a contract (docs/testid.md).
 const calloutTemplate = /* html */`
   <div
     class="navi_callout"
     popover="manual"
     navi-out-of-flow=""
     aria-expanded="true"
+    role="status"
   >
     <div class="navi_callout_box">
       <div class="navi_callout_frame"></div>
@@ -7691,7 +7719,7 @@ const generateSvgWithoutArrow = (width, height) => {
  *
  * Usage:
  *   const myToken = createOpenToken();
- *   calloutManager.addOpenToken(myToken, { message, status, anchorElement, event, skipFocus, onClose });
+ *   calloutManager.addOpenToken(myToken, { message, status, testId, anchorElement, event, skipFocus, onClose });
  *   calloutManager.removeOpenToken(myToken, event);
  *   calloutManager.requestCloseCallout(event, debugReason); // force-close all
  *   calloutManager.callout  // current open callout or null
@@ -7737,6 +7765,7 @@ const createCalloutManager = (
         const [, remainingTokenData] = tokens.entries().next().value;
         callout.update(remainingTokenData.message, {
           status: remainingTokenData.status,
+          testId: remainingTokenData.testId,
           icon: remainingTokenData.icon,
           closeButton: remainingTokenData.closeButton,
         });
@@ -7763,6 +7792,7 @@ const createCalloutManager = (
     {
       message,
       status,
+      testId,
       icon,
       closeButton,
       anchorElement,
@@ -7777,12 +7807,13 @@ const createCalloutManager = (
     }
     const calloutOptions = {
       status,
+      testId,
       icon,
       closeButton,
       closeOnClickOutside: status !== "error",
     };
 
-    tokens.set(token, { message, status, icon, closeButton, onClose });
+    tokens.set(token, { message, status, testId, icon, closeButton, onClose });
     if (callout) {
       callout.update(message, calloutOptions);
       return;
@@ -59308,6 +59339,7 @@ const PickerContentInsidePopup = props => {
     children: isCallout ? jsx(PickerCalloutPopup, {
       ...popupProps,
       pickerRef: props.ref,
+      testId: popupTestId,
       status: calloutStatus,
       icon: calloutIcon,
       closeButton: calloutCloseButton,
@@ -59372,6 +59404,7 @@ const PickerCalloutPopup = ({
   anchor,
   openController,
   pickerRef,
+  testId,
   status,
   icon,
   closeButton,
@@ -59397,6 +59430,10 @@ const PickerCalloutPopup = ({
     const anchorElement = anchor === pickerRef ? undefined : anchor && "current" in anchor ? anchor.current : anchor;
     calloutManager.addOpenToken(PICKER_CALLOUT_CONTENT_TOKEN, {
       message: hostRef.current,
+      // The popup a `popupTestId` names is this callout: it is the surface the
+      // picker opens, drawn by navi, so it is the one thing the caller cannot
+      // name from its own children.
+      testId,
       // "none" is the picker's word for it; the callout's is no status at all.
       status: status === "none" ? undefined : status,
       icon,
@@ -66945,6 +66982,10 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
   --x-picker-padding-right: var(--picker-padding-right, var(--picker-padding-x, var(--picker-padding, var(--picker-padding-x-default))));
   --x-picker-padding-left: var(--picker-padding-left, var(--picker-padding-x, var(--picker-padding, var(--picker-padding-x-default))));
   --x-picker-padding-bottom: var(--picker-padding-bottom, var(--picker-padding-y, var(--picker-padding, var(--picker-padding-y-default))));
+  --x-picker-press-padding-top: var(--picker-press-padding-top, var(--picker-press-padding-y, var(--picker-press-padding, 0px)));
+  --x-picker-press-padding-right: var(--picker-press-padding-right, var(--picker-press-padding-x, var(--picker-press-padding, 0px)));
+  --x-picker-press-padding-bottom: var(--picker-press-padding-bottom, var(--picker-press-padding-y, var(--picker-press-padding, 0px)));
+  --x-picker-press-padding-left: var(--picker-press-padding-left, var(--picker-press-padding-x, var(--picker-press-padding, 0px)));
   --x-picker-color: var(--picker-color);
   --x-picker-icon-color: var(--picker-icon-color);
   --x-picker-align-x: var(--picker-align-x, var(--picker-align-x-default));
@@ -67091,14 +67132,17 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`@layer navi {
 
   &[navi-ui-custom] {
     & .navi_picker_input {
-      top: calc(-1 * var(--picker-border-width));
-      right: calc(-1 * var(--picker-border-width));
-      bottom: calc(-1 * var(--picker-border-width));
-      left: calc(-1 * var(--picker-border-width));
-      opacity: 0;
-      appearance: none;
+      top: calc(-1 * (var(--picker-border-width) + var(--x-picker-press-padding-top)));
+      right: calc(-1 *
+            (var(--picker-border-width) + var(--x-picker-press-padding-right)));
+      bottom: calc(-1 *
+            (var(--picker-border-width) + var(--x-picker-press-padding-bottom)));
+      left: calc(-1 * (var(--picker-border-width) + var(--x-picker-press-padding-left)));
       width: auto;
       height: auto;
+      font: inherit;
+      opacity: 0;
+      appearance: none;
       position: absolute;
     }
   }
@@ -67278,6 +67322,12 @@ const PickerButton = props => {
   // keywords have to become lengths here — "s" reaching CSS untouched makes
   // the declaration invalid, silently, and the gap just goes away.
   props.slotSpacing = resolveSpacingSize(props.slotSpacing);
+  for (const pressPaddingPropName of PRESS_PADDING_PROP_NAMES) {
+    const pressPadding = props[pressPaddingPropName];
+    if (pressPadding !== undefined) {
+      props[pressPaddingPropName] = stringifySpacingStyle(pressPadding);
+    }
+  }
   const {
     ref,
     variant,
@@ -67836,6 +67886,13 @@ const isOpeningKeyboardOnMobile = type => {
 const NON_MOBILE_KEYBOARD_TYPES = new Set(["date", "month", "week", "time", "datetime-local", "color"]);
 const PICKER_BUTTON_PSEUDO_CLASSES = [":hover", ":focus", ":focus-visible", ":focus-within", ":read-only", ":disabled", ":-navi-loading", ":-navi-expanded", ":-navi-has-value"];
 const PickerInputPseudoClasses = [":focus", ":focus-visible", ":read-only", ":disabled", ":-navi-loading", ":-navi-has-value", ":-navi-expanded"];
+
+// Spacing props that are not the names of real CSS styles, so Box hands them to
+// the custom property untouched: a size keyword would reach CSS as the word "s"
+// and a number as a unitless one, either of which makes the calc() using it
+// invalid and drops the press area back to the box. Hence the pass in
+// PickerButton, which turns them into lengths.
+const PRESS_PADDING_PROP_NAMES = ["pressPadding", "pressPaddingX", "pressPaddingY", "pressPaddingTop", "pressPaddingRight", "pressPaddingBottom", "pressPaddingLeft"];
 const PickerStyleCSSVars = {
   "outlineWidth": "--picker-outline-width",
   "borderWidth": "--picker-border-width",
@@ -67849,6 +67906,13 @@ const PickerStyleCSSVars = {
   "popupBorderRadius": "--picker-popup-border-radius",
   "dialogBorderWidth": "--picker-dialog-border-width",
   "slotSpacing": "--picker-slot-spacing",
+  "pressPadding": "--picker-press-padding",
+  "pressPaddingX": "--picker-press-padding-x",
+  "pressPaddingY": "--picker-press-padding-y",
+  "pressPaddingTop": "--picker-press-padding-top",
+  "pressPaddingRight": "--picker-press-padding-right",
+  "pressPaddingBottom": "--picker-press-padding-bottom",
+  "pressPaddingLeft": "--picker-press-padding-left",
   // alignX/alignY resolve to these two on a flex-x box; naming the CSS style
   // (not the prop) is what styleCSSVars matches, so justifyContent/alignItems
   // passed directly land in the same variables.