@jsenv/navi 0.29.445 → 0.29.447

package/dist/dev/jsenv_navi.js

@@ -86980,7 +86980,10 @@ const css$n = /* css */`.navi_split_button {
  * `pressOutside`, `escapeEffect`, `closeOnFocusOut`,
  * `scrollCapture`, `focusCapture`, `popupBackgroundColor`,
  * `popupBorderRadius`, `animation`. See picker.jsx for what each one says.
- * Anything else lands on the split button's own box.
+ * An `aria-*` attribute describes the button and reaches the main half —
+ * `aria-pressed` for a split button whose main half toggles a mode;
+ * `aria-hidden` excepted, which hides the whole control. Anything else lands
+ * on the split button's own box.
  */
 const SplitButton = props => {
   import.meta.css = [css$n, "@jsenv/navi/src/control/input/split_button.jsx"];
@@ -87017,11 +87020,12 @@ const SplitButton = props => {
     id,
     ...rest
   } = props;
-  // Everything the popup answers to travels to the Picker; everything else is
-  // the split button's own box (margins, width, data-*). Sorted by name rather
-  // than named one by one so a Picker popup prop is forwarded by adding it to
-  // that list, not by threading it through here.
-  const [popupProps, boxProps] = splitPopupProps(rest);
+  // Everything the popup answers to travels to the Picker; an aria-* describes
+  // the button a screen reader meets, which is the main half; everything else
+  // is the split button's own box (margins, width, data-*). Sorted by name
+  // rather than named one by one so a Picker popup prop is forwarded by adding
+  // it to that list, not by threading it through here.
+  const [popupProps, buttonAriaProps, boxProps] = sortRestProps(rest);
   // A split button is a control on the page, not a place one goes: its menu
   // hangs off it even on a phone, where a picker left to itself would decide a
   // small screen means a dialog. Passing mode="dialog" asks for that back.
@@ -87091,6 +87095,7 @@ const SplitButton = props => {
         commandFor: commandFor,
         "command-value": commandValue,
         prefetch: prefetch,
+        ...buttonAriaProps,
         ...halfProps,
         children: label === undefined ? optionShown?.label : label
       }), jsxs("div", {
@@ -87179,17 +87184,22 @@ const SplitButton = props => {
 // a caller reaches all of them through the split button (see picker.jsx's JSDoc
 // for what each one says).
 const POPUP_PROP_SET = new Set(["mode", "popupLayer", "popupTestId", "positionArea", "popoverMode", "popoverSpacing", "popupWidthFitContent", "popoverMaxHeight", "dialogMinWidth", "dialogMinHeight", "dialogMaxWidth", "dialogMaxHeight", "dialogExpand", "dialogExpandX", "dialogExpandY", "dockedOnSmallTouchScreen", "marginWithContainer", "backdrop", "backdropVariant", "backdropColor", "backdropFilter", "pressOutside", "escapeEffect", "closeOnFocusOut", "scrollCapture", "focusCapture", "popupBackgroundColor", "popupBorderRadius", "animation"]);
-const splitPopupProps = props => {
+const sortRestProps = props => {
   const popupProps = {};
+  const buttonAriaProps = {};
   const boxProps = {};
   for (const key of Object.keys(props)) {
     if (POPUP_PROP_SET.has(key)) {
       popupProps[key] = props[key];
+    } else if (key.startsWith("aria-") && key !== "aria-hidden") {
+      // aria-hidden hides a subtree rather than describing a button: on the
+      // main half alone it would leave the chevron half exposed.
+      buttonAriaProps[key] = props[key];
     } else {
       boxProps[key] = props[key];
     }
   }
-  return [popupProps, boxProps];
+  return [popupProps, buttonAriaProps, boxProps];
 };
 
 /**
@@ -95706,6 +95716,12 @@ const DEFAULT_PLACEHOLDER_LIGHT = "#d4d8dd";
 const DEFAULT_PLACEHOLDER_DARK = "#374151";
 
 /**
+ * The props may come in any order: `src` and `srcset` reach the element after
+ * `loading` and the other hints. A plain `<img>` (or `<Box as="img">`) written
+ * in JSX must put `loading` before `src`: WebKit, so every browser on iOS,
+ * decides whether to load when `src` is set, and an image whose `src` came
+ * first loads, lazy or not.
+ *
  * @param {string|false} [props.placeholderColor] - Background color shown while the image loads.
  *   Defaults to a light gray. Pass `false` to disable.
  * @param {boolean} [props.placeholderDark] - Use a dark default placeholder color,
@@ -95715,6 +95731,9 @@ const DEFAULT_PLACEHOLDER_DARK = "#374151";
 const Image = ({
   placeholderColor,
   placeholderDark = false,
+  srcset,
+  srcSet,
+  src,
   ...rest
 }) => {
   import.meta.css = [css$5, "@jsenv/navi/src/graphic/image.jsx"];
@@ -95739,6 +95758,13 @@ const Image = ({
       imageEl.setAttribute("navi-loaded", "");
       rest.onLoad?.(e);
     }
+    // Last, srcset before src: an <img> decides its request when they are
+    // set, with the attributes it has at that moment. WebKit loads an image
+    // whose src arrives before loading="lazy", and does not take it back.
+    ,
+    srcset: srcset,
+    srcSet: srcSet,
+    src: src
   });
 };