work

Author: dmail

packages/frontend/navi/dist/jsenv_navi.js

@@ -298,8 +298,9 @@ comment naming who is supposed to win:
   attributes can still change the display;
 - the text properties a surface takes back from its opener
   (`surface_text_css.js`), so an app that wants one of them back says so;
-- the `[data-url-target]` mark, the document's `line-height`, a Field's spacing
-  and a Label's dimmed color — appearance with no structural role;
+- the `[data-url-target]` mark, the document's `line-height` and
+  `font-family`, a Field's spacing and a Label's dimmed color — appearance with
+  no structural role;
 - `[data-navi-safe-area]`'s padding (`safe_area.js`), which is a suggestion for
   an element the **app** owns.
 

packages/frontend/navi/dist/jsenv_navi.js.map

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.29.150",
+  "version": "0.29.151",
   "type": "module",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {

packages/frontend/navi/dist/jsenv_navi_side_effects.js

@@ -41,7 +41,7 @@ const css = /* css */ `
       --button-color: currentColor;
       --button-cursor: pointer;
       --button-font-size: var(--navi-control-font-size);
-      --button-font-family: var(--navi-control-font-family);
+      --button-font-family: var(--navi-control-font-family, inherit);
 
       /* Hover */
       --button-border-color-hover: color-mix(

packages/frontend/navi/dist/jsenv_navi_side_effects.js.map

@@ -18,7 +18,7 @@ const css = /* css */ `
       /* Focus outline end */
       --margin: 3px 3px 3px 4px;
       --font-size: var(--navi-control-font-size);
-      --font-family: var(--navi-control-font-family);
+      --font-family: var(--navi-control-font-family, inherit);
       --width: round(1em, 1px);
       --height: round(1em, 1px);
       --loader-color: var(--navi-loader-color);

packages/frontend/navi/docs/css_architecture.md

@@ -11,7 +11,7 @@ const inputCss = /* css */ `
       --outline-color: var(--navi-focus-outline-color);
       /* Focus outline end */
       --font-size: var(--navi-control-font-size);
-      --font-family: var(--navi-control-font-family);
+      --font-family: var(--navi-control-font-family, inherit);
       --loader-color: var(--navi-loader-color);
       --border-color: var(--navi-control-border-color);
       --background-color: var(--navi-surface-color);
@@ -142,10 +142,10 @@ const inputCss = /* css */ `
       color: inherit;
       font-size: inherit;
       /* A form control does not inherit the font on its own — the browser has
-         one of its own for it, monospace for a <textarea> — so the box's font
-         (--navi-control-font-family) is handed down by hand. Its line comes
-         from the page's token for the same reason: what is typed must sit on
-         the same line as what displays it afterwards, emoji included. */
+         one of its own for it, monospace for a <textarea> — so the box's face
+         is handed down by hand. Its line comes from the page's token for the
+         same reason: what is typed must sit on the same line as what displays
+         it afterwards, emoji included. */
       font-family: inherit;
       text-align: inherit;
       line-height: var(--navi-control-line-height);

packages/frontend/navi/package.json

@@ -29,7 +29,7 @@ const css = /* css */ `
       --border-color-checked: var(--accent-color);
       --cursor: pointer;
       --font-size: var(--navi-control-font-size);
-      --font-family: var(--navi-control-font-family);
+      --font-family: var(--navi-control-font-family, inherit);
 
       /* Hover */
       --border-color-hover: color-mix(in srgb, var(--border-color) 60%, black);