@jsenv/navi 0.29.522 → 0.29.523

package/dist/jsenv_navi.js

@@ -64666,6 +64666,7 @@ const css$M = /* css */`@layer navi {
     --thumb-size: 16px;
     --thumb-width: var(--thumb-size);
     --thumb-height: var(--thumb-size);
+    --press-height: var(--thumb-height);
     --thumb-border-radius: 100%;
     --thumb-cursor: pointer;
     --font-size: var(--navi-control-font-size);
@@ -64753,6 +64754,8 @@ const css$M = /* css */`@layer navi {
   position: relative;
 
   & .navi_control_input {
+    width: 100%;
+    height: var(--press-height);
     opacity: 0;
     --webkit-appearance: none;
     min-width: inherit;
@@ -64762,7 +64765,7 @@ const css$M = /* css */`@layer navi {
 
     &::-webkit-slider-thumb {
       width: var(--thumb-width);
-      height: var(--thumb-height);
+      height: var(--press-height);
       border-radius: var(--thumb-border-radius);
       -webkit-appearance: none;
       cursor: var(--x-thumb-cursor);
@@ -64974,6 +64977,7 @@ const RangeNativeInput = props => {
   });
 };
 const RangeStyleCSSVars = {
+  "pressHeight": ["--press-height", "height"],
   "outlineWidth": "--outline-width",
   "borderRadius": "--border-radius",
   "borderColor": "--border-color",
@@ -66480,6 +66484,7 @@ const InputPseudoElements = ["::-navi-loader"];
  *   boolean?: boolean,
  *   selectOnPress?: boolean,
  *   enterSendsNothing?: boolean,
+ *   pressHeight?: number | string,
  *   variant?: "checkbox" | "switch" | "icon" | "button",
  *   buttonVariant?: "discrete",
  *   actionVerb?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE",
@@ -66529,6 +66534,12 @@ const InputPseudoElements = ["::-navi-loader"];
  *   street before its suggestion filled the city) and whose Enter would send
  *   an answer still missing its other half. The browser's own Enter is kept (a
  *   datalist choice), except in a `<Form>`, where it is the submission.
+ * @param {number|string} [pressHeight] How tall a press counts on a range, the
+ *   thumb's height by default, so a thin line stays easy to hit. The press area
+ *   only: nothing moves and nothing is drawn. It overflows the range, centered
+ *   on its line, over whatever is next to it and takes the presses aimed there,
+ *   so leave it the room it needs (`marginY`). Different for a mouse and a
+ *   finger: `--press-height` in a `@media (pointer: coarse)` rule.
  */
 const Input = props => {
   resolveInputProps(props);
@@ -67226,7 +67237,7 @@ const Editable = props => {
     children: [children || jsx("span", {
       children: value
     }), jsx(Box, {
-      className: "navi_editable_wrapper",
+      baseClassName: "navi_editable_wrapper",
       ref: wrapperRef,
       ...wrapperProps,
       // inert ensure input while not editing that:
@@ -91403,7 +91414,7 @@ const Color = ({
   const color = children || undefined;
   return jsx(Box, {
     as: "span",
-    className: "navi_color",
+    baseClassName: "navi_color",
     "navi-color-empty": color ? undefined : ""
     // propsCSSVars={COLOR_PROP_CSS_VAR}
     ,
@@ -96033,7 +96044,7 @@ const InputDuration = props => {
   delete basePseudoState[":-navi-loading"];
   return jsxs(Box, {
     ref: groupRef,
-    className: "navi_input_duration",
+    baseClassName: "navi_input_duration",
     "data-callout-arrow-x": "center",
     width: "fit-content",
     flex: true,
@@ -96544,8 +96555,7 @@ const Select = ({
     as: "span",
     inline: true,
     flex: true,
-    baseClassName: "navi_input",
-    className: "navi_select",
+    baseClassName: "navi_input navi_select",
     ...rootProps,
     basePseudoState: basePseudoState,
     styleCSSVars: InputStyleCSSVars,
@@ -104461,7 +104471,7 @@ const ButtonCopyToClipboard = ({
   import.meta.css = [css$b, "@jsenv/navi/src/control/input/button_copy_to_clipboard.jsx"];
   const [copied, copy] = useCopyToClipboard(children);
   return jsxs(Box, {
-    className: "navi_clipboard_container",
+    baseClassName: "navi_clipboard_container",
     ...props,
     children: [jsx(Box, {
       className: "navi_copied_notif",
@@ -107053,7 +107063,7 @@ const SidePanelHead = props => jsx(Box, {
  * @param {import("preact").ComponentChildren} props.children
  */
 const SidePanelFoot = props => jsx(Box, {
-  className: "navi_side_panel_foot",
+  baseClassName: "navi_side_panel_foot",
   ...props
 });
 SidePanel.Head = SidePanelHead;