@jsenv/navi 0.27.53 → 0.27.55

package/dist/jsenv_navi.js

@@ -1,4 +1,4 @@
-import { installImportMetaCssBuild } from "./jsenv_navi_side_effects.js";
+import { installImportMetaCssBuild, windowWidthSignal } from "./jsenv_navi_side_effects.js";
 import { isValidElement, createContext, h, toChildArray, render, Fragment, cloneElement } from "preact";
 import { useErrorBoundary, useLayoutEffect, useEffect, useContext, useMemo, useRef, useState, useCallback, useId } from "preact/hooks";
 import { jsxs, jsx, Fragment as Fragment$1 } from "preact/jsx-runtime";
@@ -8891,11 +8891,35 @@ import.meta.css = [/* css */`
 const PSEUDO_CLASSES_DEFAULT = [];
 const PSEUDO_ELEMENTS_DEFAULT = [];
 const STYLE_CSS_VARS_DEFAULT = {};
-const PROPS_CSS_VARS_DEFAULT = {};
 // When only pseudoStateSelector is set (no visualSelector), the box owns its
 // visual identity. Only event handlers and these explicit props are forwarded
 // to the inner semantic/interactive child element.
 const PSEUDO_STATE_CHILD_PROP_SET = new Set(["tabIndex", "tabindex"]);
+
+/**
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   as?: string,
+ *   className?: string,
+ *   style?: import("ignore:preact").JSX.CSSProperties & { [pseudo: string]: import("ignore:preact").JSX.CSSProperties },
+ *   styleCSSVars?: { [stylePropName: string]: string },
+ *   inline?: boolean,
+ *   block?: boolean,
+ *   flex?: "x" | "y" | boolean,
+ *   grid?: boolean,
+ *   display?: "inherit",
+ *   pseudoState?: { [stateName: string]: boolean },
+ *   pseudoClasses?: string[],
+ *   pseudoElements?: string[],
+ *   visualSelector?: string,
+ *   pseudoStateSelector?: string,
+ *   hasChildUsingForwardedProps?: boolean,
+ *   childPropSet?: Set<string>,
+ *   preventInitialTransition?: boolean,
+ *   separator?: import("ignore:preact").ComponentChildren | ((index: number) => import("ignore:preact").ComponentChildren),
+ *   children?: import("ignore:preact").ComponentChildren,
+ *   [key: string]: any,
+ * }>}
+ */
 const Box = props => {
   const {
     ref,
@@ -8906,7 +8930,6 @@ const Box = props => {
     // style management
     style,
     styleCSSVars = STYLE_CSS_VARS_DEFAULT,
-    propsCSSVars = PROPS_CSS_VARS_DEFAULT,
     basePseudoState,
     pseudoState,
     // for demo purposes it's possible to control pseudo state from props
@@ -9165,13 +9188,6 @@ const Box = props => {
         addStyle(value, name, styleContext, boxStylesTarget, context);
         return;
       }
-      const propCssVar = propsCSSVars[name];
-      if (propCssVar) {
-        if (value !== undefined) {
-          addCSSVar(value, propCssVar, boxStylesTarget);
-        }
-        return;
-      }
       const isPseudoStyle = styleOrigin === "pseudo_style";
       if (isStyleProp(name)) {
         // it's a style prop, we need first to check if we have css var to handle them
@@ -9205,6 +9221,13 @@ const Box = props => {
         }
         return;
       }
+      const cssVarName = styleCSSVars[name];
+      if (cssVarName) {
+        if (value !== undefined) {
+          addCSSVar(value, cssVarName, boxStylesTarget);
+        }
+        return;
+      }
       // not a style prop what do we do with it?
       // When pseudoStateSelector is set, the child element is the semantic/interactive one
       // When both selectors are set the child IS the component (e.g. Button with scale
@@ -17601,11 +17624,32 @@ const createI18n = ({
     return interpolateText(template, values);
   };
 
+  const has = (key, { lang = activeLang } = {}) => {
+    const resolvedLang = lang ? matchLang(lang, languageMap) : null;
+    if (resolvedLang) {
+      const translations = languageMap.get(resolvedLang);
+      if (translations && key in translations) {
+        return true;
+      }
+    }
+    if (fallbackLang) {
+      const resolvedFallbackLang = matchLang(fallbackLang, languageMap);
+      if (resolvedFallbackLang) {
+        const fallbackTranslations = languageMap.get(resolvedFallbackLang);
+        if (fallbackTranslations && key in fallbackTranslations) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
   // The i18n instance is itself a callable function
   const i18n = (key, values, opts) => format(key, values, opts);
   i18n.add = add;
   i18n.addAll = addAll;
   i18n.addLangKeys = addLangKeys;
+  i18n.has = has;
   i18n.format = format;
   i18n.languageMap = languageMap;
 
@@ -27347,57 +27391,74 @@ const shouldInjectSpacingBetween = (left, right) => {
 };
 
 /**
- * Text component for rendering inline or block text with layout-stable style changes.
- *
- * Most props are forwarded to the underlying `Box` component (as, style, bold, noWrap, …).
- * The props listed below are specific to Text.
- *
- * @param {object} props
- *
- * @param {number} [props.maxLines]
- *   Truncates overflowing text with an ellipsis after at most N lines.
- *   `maxLines={1}` truncates after one line (single-line ellipsis).
- *   `maxLines={n}` (n > 1) truncates after n lines (multi-line clamp).
- *
- * @param {string} [props.spacing]
- *   Controls the separator injected between child nodes.
- *   Accepts a size/spacing scale key, a CSS length, or `"pre"` / `0` to disable.
- *   Defaults to a regular space character (or a padding-based fake space when
- *   `preventSpaceUnderlines` is active).
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   children?: import("ignore:preact").ComponentChildren,
+ *   as?: string,
+ *   className?: string,
+ *   style?: import("ignore:preact").JSX.CSSProperties,
+ *   bold?: boolean,
+ *   noWrap?: boolean,
+ *   maxLines?: number,
+ *   spacing?: string | number | import("ignore:preact").ComponentChildren,
+ *   loading?: boolean,
+ *   skeleton?: boolean,
+ *   preventSpaceUnderlines?: boolean,
+ *   holdSpaceForStyle?: import("ignore:preact").JSX.CSSProperties,
+ *   boldStable?: boolean,
+ *   shrinkWrap?: boolean,
+ *   capitalize?: boolean,
+ *   selectRange?: string | [number, number],
+ *   childrenOutsideFlow?: import("ignore:preact").ComponentChildren,
+ *   [key: string]: any,
+ * }>}
  *
- * @param {boolean} [props.loading]
- *   Renders a shimmer skeleton in place of the text.
- *
- * @param {boolean} [props.skeleton]
- *   Same as `loading` but without the shimmer animation.
- *
- * @param {boolean} [props.preventSpaceUnderlines]
- *   Replaces real space characters between children with padding-based spaces
- *   to avoid the underline browsers draw under spaces inside links.
- *
- * @param {object} [props.holdSpaceForStyle]
- *   Prevents layout shifts when text styles change (font-weight, font-size, …).
- *   Pass an object of CSS-in-JS style properties representing the "maximum" state of the text.
- *   An invisible placeholder is rendered with those styles to reserve the space,
- *   and the real visible text is layered on top via `position: absolute`.
- *   Only works reliably with single-line (`noWrap`) text.
- *   Example: `holdSpaceForStyle={{ fontWeight: "bold", fontSize: "1.5rem" }}`
- *
- * @param {boolean} [props.boldStable]
- *   Alternative to `holdSpaceForStyle` for multi-line text.
- *   Keeps a consistent visual width regardless of font-weight by painting normal-weight
- *   text on top of a bold background using `background-clip: text`.
- *   Does not support font-size changes.
- *
- * @param {boolean} [props.capitalize]
- *   Applies `text-transform: uppercase` to the first letter via CSS.
- *
- * @param {string|Array} [props.selectRange]
- *   Selects a portion of the text on mount. Forwarded to `useInitialTextSelection`.
- *
- * @param {*} [props.childrenOutsideFlow]
- *   Rendered after children but outside the text flow (useful for overlays
- *   like the skeleton container).
+ * @param {number} [maxLines]
+ *   Truncates overflowing text with an ellipsis. `maxLines={1}` produces a
+ *   single-line truncation; `maxLines={n}` (n > 1) uses `-webkit-line-clamp`
+ *   to allow up to n lines before clipping.
+ *
+ * @param {string|number} [spacing]
+ *   Separator injected between child nodes. Accepts a size token (`"s"`, `"m"`, …),
+ *   a CSS length string, a number (interpreted as px), or `"pre"` / `0` to
+ *   disable spacing entirely. Defaults to a regular space character.
+ *
+ * @param {boolean} [loading]
+ *   Renders a shimmer skeleton animation in place of the text content.
+ *
+ * @param {boolean} [skeleton]
+ *   Same as `loading` but without the shimmer animation — a static grey bar.
+ *
+ * @param {boolean} [preventSpaceUnderlines]
+ *   Replaces real space characters between children with padding-based spaces.
+ *   Useful inside `<a>` elements where browsers draw an underline under spaces.
+ *
+ * @param {import("ignore:preact").JSX.CSSProperties} [holdSpaceForStyle]
+ *   Prevents layout shifts when text styles change (e.g. font-weight, font-size).
+ *   Pass the CSS properties representing the "largest" visual state of the text.
+ *   An invisible placeholder rendered with those styles reserves the space; the
+ *   real visible text is layered on top via `position: absolute`.
+ *   Best combined with `noWrap` — does not work reliably on multi-line text.
+ *
+ * @param {boolean} [boldStable]
+ *   Alternative to `holdSpaceForStyle` for multi-line text. Keeps a consistent
+ *   visual width across bold/normal transitions by painting normal-weight text
+ *   over a bold background using `background-clip: text`. Does not handle
+ *   font-size changes.
+ *
+ * @param {boolean} [shrinkWrap]
+ *   Forces the element width to match its longest visual line, preventing the
+ *   text block from being wider than its content when inside a flex/grid container.
+ *
+ * @param {boolean} [capitalize]
+ *   Uppercases the first letter of the text content via CSS.
+ *
+ * @param {string|[number,number]} [selectRange]
+ *   Selects a portion of the text on mount. Pass a substring to search for, or
+ *   a `[start, end]` character-offset tuple.
+ *
+ * @param {import("ignore:preact").ComponentChildren} [childrenOutsideFlow]
+ *   Rendered after children but outside the text spacing/flow logic. Used
+ *   internally for overlays such as the skeleton container.
  */
 const Text = props => {
   const defaultRef = useRef();
@@ -34374,21 +34435,13 @@ const Unit = ({
   let unitText = unit;
   if (label) {
     unitText = label;
-  } else {
+  } else if (naviI18n.has(unit, {
+    lang
+  })) {
     const singularText = naviI18n(unit, undefined, {
       lang
     });
-    if (singularText === unit) {
-      // naviI18n has no translation — try Intl.NumberFormat with style:"unit"
-      const intlText = formatIntlUnit(unit, {
-        plural,
-        lang,
-        format
-      });
-      if (intlText !== null) {
-        unitText = intlText;
-      }
-    } else if (format === "short" || format === "narrow") {
+    if (format === "short" || format === "narrow") {
       const shortKey = `${unit}__short`;
       const shortText = naviI18n(shortKey, undefined, {
         lang
@@ -34404,6 +34457,18 @@ const Unit = ({
     } else {
       unitText = singularText;
     }
+  } else {
+    // naviI18n has no translation — try Intl.NumberFormat with style:"unit"
+    const intlText = formatIntlUnit(unit, {
+      plural,
+      lang,
+      format
+    });
+    if (intlText === null) {
+      unitText = unit;
+    } else {
+      unitText = intlText;
+    }
   }
   return jsx(Text, {
     baseClassName: "navi_unit",
@@ -35291,12 +35356,6 @@ const renderSafe = (value) => {
 
 const PickerContext = createContext();
 
-const windowWidthSignal = signal(window.innerWidth);
-
-window.addEventListener("resize", () => {
-  windowWidthSignal.value = window.innerWidth;
-});
-
 /**
  * Mirrors what browsers do when navigating to a page:
  * 1. Focus the first element with [navi-autofocus] (but not [navi-autofocus="fallback"]) inside the container
@@ -35573,12 +35632,17 @@ const Dialog = props => {
     pseudoClasses: DIALOG_PSEUDO_CLASSES,
     onMouseDown: e => {
       rest.onMouseDown?.(e);
-      // The <dialog> element covers the full viewport; clicking the backdrop
-      // hits the dialog itself (not any child). Close when that happens.
+      // Detect backdrop click: the click must land outside the dialog's
+      // bounding rect. Checking coordinates is necessary because clicking
+      // on the dialog's own padding also sets e.target === ref.current.
       if (!pointerTrap && e.button === 0 && e.target === ref.current) {
-        onRequestClose(e, {
-          isClickOutside: true
-        });
+        const rect = ref.current.getBoundingClientRect();
+        const isBackdrop = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
+        if (isBackdrop) {
+          onRequestClose(e, {
+            isClickOutside: true
+          });
+        }
       }
     },
     onCancel: e => {
@@ -35834,22 +35898,48 @@ const POPOVER_PSEUDO_CLASSES = [":hover", ":active", ":focus", ":focus-visible",
 
 installImportMetaCssBuild(import.meta);const css$p = /* css */`
   .navi_picker {
+    /* Shared by popover and dialog */
+    --picker-popup-background-color: var(--picker-background-color);
+    --picker-popup-border-radius: var(--picker-border-radius);
+    --picker-popup-border-width: var(--picker-border-width);
+    /* Popover */
+    --picker-popover-max-height: 300px; /* soft: user-configurable preferred max-height */
+    --picker-popover-maxmax-height: calc(0.95 * var(--navi-vvh));
+    --picker-popover-maxmax-width: calc(0.95 * var(--navi-vvw));
+    /* --picker-popover-max-width: soft, leave unset to rely on maxmax */
+    /* Dialog */
+    --picker-dialog-margin: 3dvw; /* min gap between dialog edges and viewport */
+    --picker-dialog-maxmax-width: calc(
+      var(--navi-vvw) - 2 * var(--picker-dialog-margin)
+    );
+    --picker-dialog-maxmax-height: calc(
+      var(--navi-vvh) - 2 * var(--picker-dialog-margin)
+    );
+    --picker-dialog-border-width: 0px; /* Dialog do not need border like popover (they stand out more) */
+
     /* popover */
     &[aria-haspopup="listbox"] {
       .navi_picker_popover {
         position: absolute;
         inset: unset;
         min-width: var(--anchor-width, 0px);
-        max-width: 95vw;
+        max-width: min(
+          var(--picker-popover-max-width, var(--picker-popover-maxmax-width)),
+          var(--picker-popover-maxmax-width)
+        );
         /* max-height covers the placeholder + list; the list scrolls internally */
-        max-height: min(var(--picker-popup-max-height, 300px), var(--space-available, 95dvh));
+        max-height: min(
+          var(--picker-popover-max-height),
+          var(--space-available, var(--picker-popover-maxmax-height)),
+          var(--picker-popover-maxmax-height)
+        );
         margin: 0;
         padding: 0;
-        background: var(--picker-background-color);
+        background: var(--picker-popup-background-color);
         border-width: var(--picker-border-width);
         border-style: solid;
         border-color: var(--x-picker-border-color);
-        border-radius: var(--picker-border-radius);
+        border-radius: var(--picker-popup-border-radius);
         outline-width: var(--picker-outline-width);
         outline-color: var(--picker-outline-color);
         outline-offset: 0px;
@@ -35857,7 +35947,7 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
           0 4px 8px rgba(0, 0, 0, 0.08),
           0 12px 40px rgba(0, 0, 0, 0.22);
         cursor: default; /* Reset pointer cursor within the select */
-        overflow: hidden;
+        overflow: auto;
         overscroll-behavior: none;
 
         /* The anchor placeholder is a non-interactive visual clone of the
@@ -35905,7 +35995,7 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
           width: 100%;
           border-radius: max(
             0px,
-            var(--picker-border-radius) - var(--picker-border-width)
+            var(--picker-popup-border-radius) - var(--picker-border-width)
           );
           overflow: auto;
           overscroll-behavior: none;
@@ -35934,16 +36024,20 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
     /* dialog */
     &[aria-haspopup="dialog"] {
       .navi_picker_dialog {
-        --dialog-max-width: 95dvw;
-        --dialog-max-height: 95dvh;
-
         min-width: var(--anchor-width, 0px);
-        max-width: var(--dialog-max-width);
-        max-height: var(--dialog-max-height);
+        max-width: min(
+          var(--picker-dialog-max-width, var(--picker-dialog-maxmax-width)),
+          var(--picker-dialog-maxmax-width)
+        );
+        max-height: min(
+          var(--picker-dialog-max-height, var(--picker-dialog-maxmax-height)),
+          var(--picker-dialog-maxmax-height)
+        );
         padding: 0;
-        background: var(--picker-background-color);
-        border: var(--picker-border-width) solid var(--x-picker-border-color);
-        border-radius: var(--picker-border-radius);
+        background: var(--picker-popup-background-color);
+        border: var(--picker-dialog-border-width) solid
+          var(--x-picker-border-color);
+        border-radius: var(--picker-popup-border-radius);
         outline-width: var(--picker-outline-width);
         outline-color: var(--picker-outline-color);
         outline-offset: 0;
@@ -35954,10 +36048,10 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
         /* overscroll-behavior: contain; */
 
         &[data-expand-x] {
-          width: var(--dialog-max-width);
+          width: var(--picker-dialog-maxmax-width);
         }
         &[data-expand-y] {
-          height: var(--dialog-max-height);
+          height: var(--picker-dialog-maxmax-height);
         }
 
         &[open] {
@@ -35978,7 +36072,7 @@ installImportMetaCssBuild(import.meta);const css$p = /* css */`
         width: 100%;
         border-radius: max(
           0px,
-          var(--picker-border-radius) - var(--picker-border-width)
+          var(--picker-popup-border-radius) - var(--picker-border-width)
         );
         overflow: auto;
         overscroll-behavior: none;
@@ -36322,11 +36416,14 @@ const PickerCustom = props => {
           };
         }
       });
+      const isWithinPopup = el => {
+        const popupEl = popupRef.current;
+        return el === popupEl || popupEl.contains(el);
+      };
       Object.assign(pickerProps, {
         eventReactionDefinitions: {
           mouseDown: e => {
-            const popupEl = popupRef.current;
-            if (popupEl && popupEl.contains(e.target)) {
+            if (isWithinPopup(e.target)) {
               return null;
             }
             if (expandedRef.current) {
@@ -36347,8 +36444,7 @@ const PickerCustom = props => {
             };
           },
           click: e => {
-            const popupEl = popupRef.current;
-            if (popupEl && popupEl.contains(e.target)) {
+            if (isWithinPopup(e.target)) {
               return null;
             }
             // When a label is clicked it transfers focus to the select
@@ -40902,6 +40998,10 @@ const PickerStyleCSSVars = {
   "outlineWidth": "--picker-outline-width",
   "borderWidth": "--picker-border-width",
   "borderRadius": "--picker-border-radius",
+  "popoverMaxHeight": "--picker-popover-max-height",
+  "popupBackgroundColor": "--picker-popup-background-color",
+  "popupBorderRadius": "--picker-popup-border-radius",
+  "dialogBorderWidth": "--picker-dialog-border-width",
   "padding": "--picker-padding",
   "paddingX": "--picker-padding-x",
   "paddingY": "--picker-padding-y",
@@ -40976,6 +41076,9 @@ const PickerFirstResolver = props => {
  *   variant?: "icon" | "headless",
  *   icon?: import("ignore:preact").ComponentChildren,
  *   maxLines?: number,
+ *   popoverMaxHeight?: number | string,
+ *   popupBackgroundColor?: string,
+ *   popupBorderRadius?: number | string,
  *   dialogExpand?: boolean,
  *   dialogExpandX?: boolean,
  *   dialogExpandY?: boolean,
@@ -45854,6 +45957,26 @@ installImportMetaCssBuild(import.meta);const css$7 = /* css */`
     }
   }
 `;
+
+/**
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   children?: number | string,
+ *   unit?: string,
+ *   unitPosition?: "right" | "bottom",
+ *   unitSize?: string,
+ *   unitSizeRatio?: number,
+ *   unitColor?: string,
+ *   label?: string,
+ *   size?: string,
+ *   lang?: string,
+ *   integer?: boolean,
+ *   loading?: boolean,
+ *   readOnly?: boolean,
+ *   disabled?: boolean,
+ *   bold?: boolean,
+ *   [key: string]: any,
+ * }>}
+ */
 const Quantity = ({
   children,
   unit,
@@ -45881,7 +46004,7 @@ const Quantity = ({
   return jsxs(Text, {
     baseClassName: "navi_quantity",
     "data-unit-bottom": unitBottom ? "" : undefined,
-    propsCSSVars: QuantityPropsCSSVars,
+    styleCSSVars: QuantityStyleCSSVars,
     basePseudoState: {
       ":read-only": readOnly,
       ":disabled": disabled,
@@ -45915,7 +46038,7 @@ const Quantity = ({
     })]
   });
 };
-const QuantityPropsCSSVars = {
+const QuantityStyleCSSVars = {
   unitColor: "--unit-color"
 };
 const QuantityPseudoClasses = [":hover", ":active", ":read-only", ":disabled", ":-navi-loading"];
@@ -46795,7 +46918,7 @@ const SidePanel = ({
     value: onClose,
     children: jsxs(Box, {
       baseClassName: "navi_side_panel",
-      propsCSSVars: SidePanelStyleCSSVars,
+      styleCSSVars: SidePanelStyleCSSVars,
       width: width,
       "data-opening": phase === "opening" ? "" : undefined,
       "data-closing": phase === "closing" ? "" : undefined,