@jsenv/navi 0.29.487 → 0.29.488

package/dist/dev/jsenv_navi.js

@@ -77620,11 +77620,6 @@ const PickerCustom = props => {
       // button) hangs its popup off the whole control instead.
       anchor: props.anchor || props.ref,
       openController,
-      // Before the content is built and shown, so it is laid out and placed
-      // at the size it is read at (see .navi_picker_content in picker.jsx).
-      onOpen: () => {
-        writeContainerFont(ref.current, popupRef.current);
-      },
       // A picker whose value was never given to it reads it off the control in
       // its popup (see useUIFacadeStateController), so that control is built as
       // soon as something reads the value: at mount when the picker sees the
@@ -78449,30 +78444,6 @@ const showNativePicker = (pickerInput, event) => {
   }
 };
 
-// The popup of a picker is opened where the picker stands, so it writes at the
-// size and weight of what is around it — the ones a Dialog rendered there
-// inherits — and never at the ones the trigger is drawn at. CSS cannot reach
-// past the picker's own: its root holds the popup and sets both. Written on the
-// holder only when they differ, so an opening that changes nothing invalidates
-// no style.
-const writeContainerFont = (pickerEl, popupEl) => {
-  const container = pickerEl?.parentElement;
-  const holder = popupEl?.closest("[data-picker-content]");
-  if (!container || !holder) {
-    return;
-  }
-  const {
-    fontSize,
-    fontWeight
-  } = getComputedStyle(container);
-  if (holder.style.fontSize !== fontSize) {
-    holder.style.fontSize = fontSize;
-  }
-  if (holder.style.fontWeight !== fontWeight) {
-    holder.style.fontWeight = fontWeight;
-  }
-};
-
 installImportMetaCssBuild(import.meta);
 const css$y = /* css */`.navi_picker_confirm_body {
   min-width: 180px;
@@ -89127,7 +89098,17 @@ const PickerFileUI = /*#__PURE__*/asPickerOwnUI(() => {
 });
 
 installImportMetaCssBuild(import.meta);
-const css$r = /* css */`@layer navi {
+const css$r = /* css */`@property --navi-picker-container-font-size {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16px;
+}
+
+@layer navi {
+  :where(:has( > .navi_picker)) {
+    --navi-picker-container-font-size: 1em;
+  }
+
   .navi_picker {
     --picker-border-radius: var(--navi-control-border-radius);
     --picker-border-width: var(--navi-control-border-width);
@@ -89138,6 +89119,7 @@ const css$r = /* css */`@layer navi {
     --picker-padding-x-default: var(--navi-picker-padding-x-default);
     --picker-padding-y-default: var(--navi-picker-padding-y-default);
     --picker-font-size: var(--navi-control-font-size);
+    --picker-font-weight: initial;
     --picker-font-family: var(--navi-control-font-family, inherit);
     --picker-loader-color: var(--navi-loader-color);
     --picker-cta-background-color: var(--navi-accent-color);
@@ -89364,6 +89346,7 @@ const css$r = /* css */`@layer navi {
     padding-bottom: var(--x-picker-padding-bottom);
     align-items: var(--x-picker-align-y);
     justify-content: var(--x-picker-align-x);
+    font-weight: var(--picker-font-weight, inherit);
     background-color: var(--x-picker-background-color);
     border-width: var(--picker-border-width);
     border-style: solid;
@@ -89542,9 +89525,8 @@ const css$r = /* css */`@layer navi {
     --x-corner-top-right-radius: initial;
     --x-corner-bottom-right-radius: initial;
     --x-corner-bottom-left-radius: initial;
-    font-weight: initial;
+    font-size: var(--navi-picker-container-font-size);
     text-align: initial;
-    font-size: 1rem;
     display: contents;
   }
 
@@ -90362,6 +90344,9 @@ const PickerInputPseudoClasses = [":focus", ":focus-visible", ":read-only", ":di
 // picker_custom.jsx: a variable on the root inherits into everything the popup
 // holds, and the pickers in there would read it as their own.
 const PickerStyleCSSVars = {
+  // Onto the trigger's frame rather than the root, which holds the popup too
+  // (see --picker-font-weight).
+  "fontWeight": "--picker-font-weight",
   "outlineWidth": "--picker-outline-width",
   "borderWidth": "--picker-border-width",
   "borderRadius": "--picker-border-radius",