@jsenv/navi 0.29.444 → 0.29.446

package/dist/jsenv_navi.js

@@ -55465,7 +55465,8 @@ a.navi_button {
 
   &[data-icon] {
     --button-padding: 0;
-    display: inline-flex;
+    justify-content: center;
+    align-items: center;
   }
 
   &[data-cta] {
@@ -55563,7 +55564,12 @@ const ButtonUI = props => {
   });
   return jsxs(Box, {
     inline: true,
-    block: true,
+    block: true
+    // An icon is laid out as a box rather than on a line of text that is not
+    // there, which is also what makes alignX/alignY place it. Before the
+    // caller's props, so their own flex direction wins.
+    ,
+    flex: icon ? "x" : undefined,
     ...buttonControlRootProps,
     ...buttonControlHostProps,
     // eslint-disable-next-line react/no-children-prop
@@ -79792,7 +79798,6 @@ const css$w = /* css */`@layer navi;
   background: var(--x-background);
   background-color: var(--x-background-color);
   border-radius: 1em;
-  align-items: stretch;
   display: inline;
   position: relative;
 
@@ -79802,13 +79807,25 @@ const css$w = /* css */`@layer navi;
 
   &[data-text-overflow] {
     display: inline;
+  }
 
-    & .navi_text_overflow_wrapper {
-      gap: 0;
-    }
+  &[data-has-button] {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  & .navi_badge_label {
+    text-overflow: ellipsis;
+    text-box: trim-both cap alphabetic;
+    overflow-clip-margin: padding-box calc((1lh - 1em) / 2);
+    align-self: baseline;
+    min-width: 0;
+    overflow-x: clip;
   }
 
   & [role="button"] {
+    box-sizing: content-box;
+    height: 1cap;
     margin-top: calc(-1 * var(--x-badge-padding-top));
     margin-bottom: calc(-1 * var(--x-badge-padding-bottom));
     padding-top: var(--x-badge-padding-top);
@@ -79818,6 +79835,7 @@ const css$w = /* css */`@layer navi;
     cursor: pointer;
     pointer-events: auto;
     user-select: none;
+    flex-shrink: 0;
     align-items: center;
     display: inline-flex;
 
@@ -79866,6 +79884,16 @@ const BadgeUI = ({
     ref
   } = props;
   useAccentColorAttributes(ref, null);
+  const childArray = toChildArray(children);
+  if (childArray.some(isBadgeButton)) {
+    props = {
+      "inline": true,
+      "flex": true,
+      ...props,
+      "data-has-button": ""
+    };
+    children = wrapLabels(childArray);
+  }
   return jsx(Text, {
     className: withPropsClassName("navi_badge", className),
     bold: true,
@@ -79926,6 +79954,35 @@ const BadgeButtonUI = props => {
   });
 };
 Badge.Button = BadgeButton;
+const isBadgeButton = child => {
+  return isValidElement(child) && child.type === BadgeButton;
+};
+// Each run of children between buttons becomes one label: a single flex item
+// holding its text, so the trim reaches a bare string and the text keeps its
+// own baseline alignment inside.
+const wrapLabels = childArray => {
+  const items = [];
+  let run = [];
+  const closeRun = () => {
+    if (run.length > 0) {
+      items.push(jsx("span", {
+        className: "navi_badge_label",
+        children: run
+      }));
+      run = [];
+    }
+  };
+  for (const child of childArray) {
+    if (isBadgeButton(child)) {
+      closeRun();
+      items.push(child);
+    } else {
+      run.push(child);
+    }
+  }
+  closeRun();
+  return items;
+};
 
 installImportMetaCssBuild(import.meta);
 const css$v = /* css */`@layer navi;
@@ -80665,8 +80722,6 @@ const PickerChip = ({
   ...rest
 }) => {
   return jsxs(Badge, {
-    inline: true,
-    flex: true,
     ...rest,
     children: [children, jsx(Badge.Button, {
       selfInteractions: "click",
@@ -84694,7 +84749,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"];
@@ -84731,11 +84789,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.
@@ -84805,6 +84864,7 @@ const SplitButton = props => {
         commandFor: commandFor,
         "command-value": commandValue,
         prefetch: prefetch,
+        ...buttonAriaProps,
         ...halfProps,
         children: label === undefined ? optionShown?.label : label
       }), jsxs("div", {
@@ -84812,14 +84872,7 @@ const SplitButton = props => {
         children: [jsx(Button, {
           icon: true,
           paddingX: "s",
-          expandY: true
-          // flex + align: the icon is the whole content, so it is laid out as
-          // its own box in the middle of the button. Left to flow inline it
-          // would sit on the baseline of a line of text that is not there,
-          // with the descender space still kept below it.
-          ,
-          flex: true,
-          align: "center",
+          expandY: true,
           "aria-label": menuLabel,
           command: "--navi-open",
           commandFor: menuId,
@@ -84900,17 +84953,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];
 };
 
 /**
@@ -91930,8 +91988,6 @@ const ButtonCopyToClipboard = ({
       children: "Copié !"
     }), jsx(Button, {
       className: "navi_copy_button",
-      flex: "y",
-      alignY: "center",
       icon: true,
       revealOnInteraction: true,
       square: true,
@@ -92820,8 +92876,6 @@ const MessageBox = ({
             action: onClose,
             icon: true,
             border: "none",
-            alignX: "center",
-            alignY: "center",
             style: {
               ":hover": {
                 backgroundColor: "rgba(0, 0, 0, 0.1)"