@visns-studio/visns-components 6.24.0 → 6.24.1

package/package.json

@@ -93,7 +93,7 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.24.0",
+    "version": "6.24.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/AsyncSelect.jsx

@@ -223,7 +223,7 @@ function VisnsAsyncSelect({
                     minHeight:
                         style && style.multi_select_height
                             ? style.multi_select_height
-                            : 'var(--field-height, 51px)',
+                            : 'var(--field-height, 50px)',
                     height: 'auto', // Allow height to grow with content
                 }),
                 valueContainer: (base) => ({

package/src/components/MultiSelect.jsx

@@ -350,7 +350,7 @@ function MultiSelect({
                             ? style.multi_select_height
                             : isTouchDevice()
                             ? '44px'
-                            : 'var(--field-height, 51px)', // Apple's recommended minimum touch target size
+                            : 'var(--field-height, 50px)', // one token, same default as every native control
                     height: 'auto', // Allow height to grow with content
                 }),
                 valueContainer: (base) => ({

package/src/components/Navigation.jsx

@@ -26,12 +26,14 @@ import {
     Lock,
     MessageSquare,
     MessagesSquare,
+    TrendingUp,
 } from 'lucide-react';
 import CustomFetch from './Fetch';
 import Notification from './Notification';
 import SwitchAccount from './SwitchAccount';
 import BusinessCardOcr from './BusinessCardOcr';
 import { isNavActive, bestMatchingUrl, cleanUrl } from './navActive';
+import { navBadge, badgeFor, badgeAriaLabel } from './navBadges';
 import styles from './styles/Navigation.module.scss';
 
 // Opt-in icons for the sidebar (simple/cms) layouts: a nav entry names one
@@ -51,6 +53,10 @@ const NAV_ICONS = {
     phone: Phone,
     reports: BarChart3,
     safety: Shield,
+    // A pipeline group — deals, subscriptions, agreements. `billing` is the
+    // card and means "money already owed"; this one is money still being
+    // chased, which is a different heading in every nav that has both.
+    sales: TrendingUp,
     settings: Settings,
     sites: MapPin,
     users: Users,
@@ -117,6 +123,24 @@ const actionLabel = (n) => {
         .replace(/^./, (c) => c.toUpperCase());
 };
 
+/**
+ * The count pill on a navigation item.
+ *
+ * `aria-hidden` on purpose: the number is already in the item's accessible
+ * name (see badgeAriaLabel), and announcing it twice — once as the label,
+ * once as a stray "4" after it — is exactly the double-reading that makes
+ * badged navigation unpleasant with a screen reader on.
+ *
+ * Renders nothing without a badge, so every caller can hand it whatever
+ * navBadge() returned without guarding first.
+ */
+const BadgePill = ({ badge }) =>
+    badge ? (
+        <span className={styles['nav-badge']} aria-hidden="true">
+            {badge.display}
+        </span>
+    ) : null;
+
 const SearchComponent = ({
     navigate,
     search,
@@ -299,6 +323,20 @@ function Navigation({
      * does not pass it.
      */
     renderers = {},
+    /*
+     * Live counts for navigation items: `{ [navId]: number }`, or the object
+     * form `{ [navId]: { count, label } }` when the accessible name needs a
+     * noun other than "open". See navBadges.js, which owns every rule about
+     * what renders and what does not.
+     *
+     * Empty by default and additive: an id with no entry, a zero, or a value
+     * that will not parse draws nothing at all, so a consumer that publishes
+     * nothing gets exactly the bar it had before. The map is READ here and
+     * never fetched — where the numbers come from, how often they refresh and
+     * whether this user is allowed to see them are the app's business, and a
+     * shared bar has no way to know any of it.
+     */
+    badges = {},
 }) {
     const [search, setSearch] = useState('');
     const [searchResultShow, setSearchResultShow] = useState(false);
@@ -429,6 +467,13 @@ function Navigation({
             const IconComponent = iconComponents[n.icon];
             const label = actionLabel(n);
 
+            // The same badge contract the nav items honour, keyed by the
+            // setting's id — a workload count reads best in this chip row,
+            // beside the bell that already wears one. The pill stays
+            // aria-hidden; the count joins the accessible name instead,
+            // exactly as on a nav item (see BadgePill).
+            const settingBadge = badgeFor(badges, n.id);
+
             return (
                 <li>
                     <Link
@@ -436,13 +481,14 @@ function Navigation({
                         data-tooltip-id="system-tooltip"
                         data-tooltip-place="bottom"
                         data-tooltip-content={label}
-                        aria-label={label}
+                        aria-label={badgeAriaLabel(label, settingBadge)}
                         className={`${activeClass}`}
                         target={n.target ? n.target : '_self'}
                     >
                         {IconComponent && (
                             <IconComponent size={19} strokeWidth={2} />
                         )}
+                        <BadgePill badge={settingBadge} />
                     </Link>
                 </li>
             );
@@ -604,37 +650,65 @@ function Navigation({
             if (hasChildren) {
                 return (
                     <ul className={styles.navDropdown}>
-                        {n.children.map(
-                            (child, childKey) =>
-                                child.hidden !== true &&
-                                child.permission === true && (
-                                    <li key={`nav-child-${childKey}`}>
-                                        <Link
-                                            to={child.url}
-                                            className={
-                                                cleanUrl(child.url) ===
-                                                bestMatchingUrl(
-                                                    n.children.map(
-                                                        (one) => one.url
-                                                    ),
-                                                    currentPage
-                                                )
-                                                    ? styles.active
-                                                    : ''
-                                            }
-                                            onClick={() => setOpen(false)}
-                                        >
-                                            {child.label}
-                                        </Link>
-                                    </li>
-                                )
-                        )}
+                        {n.children.map((child, childKey) => {
+                            if (
+                                child.hidden === true ||
+                                child.permission !== true
+                            ) {
+                                return null;
+                            }
+
+                            const childBadge = badgeFor(badges, child.id);
+
+                            return (
+                                <li key={`nav-child-${childKey}`}>
+                                    <Link
+                                        to={child.url}
+                                        aria-label={badgeAriaLabel(
+                                            child.label,
+                                            childBadge
+                                        )}
+                                        className={
+                                            cleanUrl(child.url) ===
+                                            bestMatchingUrl(
+                                                n.children.map(
+                                                    (one) => one.url
+                                                ),
+                                                currentPage
+                                            )
+                                                ? styles.active
+                                                : ''
+                                        }
+                                        onClick={() => setOpen(false)}
+                                    >
+                                        {child.label}
+                                        <BadgePill badge={childBadge} />
+                                    </Link>
+                                </li>
+                            );
+                        })}
                     </ul>
                 );
             }
             return null;
         };
 
+        /*
+         * The item's own count, plus its visible children's — a number
+         * published against a row inside a closed dropdown would otherwise be
+         * invisible until somebody hovered the group. navBadges.js holds the
+         * rule; null when there is nothing to show, which is the usual case.
+         */
+        const itemBadge = navBadge(badges, n);
+        const ariaLabel = badgeAriaLabel(n.label, itemBadge);
+        const contents = (
+            <>
+                {NavItemIcon ? <NavItemIcon size={18} /> : null}
+                {n.label}
+                <BadgePill badge={itemBadge} />
+            </>
+        );
+
         return (
             <li
                 className={navItemClasses}
@@ -644,12 +718,51 @@ function Navigation({
                 {n.url ? (
                     // Close the mobile drawer when navigating; no-op for the
                     // header layout where the drawer state is never opened.
-                    <Link to={n.url} onClick={() => setOpen(false)}>
-                        {NavItemIcon ? <NavItemIcon size={18} /> : null}
-                        {n.label}
+                    <Link
+                        to={n.url}
+                        aria-label={ariaLabel}
+                        onClick={() => setOpen(false)}
+                    >
+                        {contents}
                     </Link>
+                ) : hasChildren ? (
+                    /*
+                     * A group heading — no page of its own, so there is
+                     * nothing to link to, but it still has to be REACHABLE.
+                     * As a <span> it was not focusable and the menu opened on
+                     * :hover alone, which left every page inside a group
+                     * unreachable by keyboard and untappable on a touch
+                     * screen. A button takes focus, and the stylesheet opens
+                     * the dropdown on :focus-within as well as :hover.
+                     *
+                     * No onClick and no aria-expanded: the open state lives
+                     * in CSS, not in React (deliberately — see the discarded
+                     * `activeDropdown` setter above, which exists only to
+                     * toggle the scroll container's overflow), and claiming a
+                     * state this component does not hold would be a lie to
+                     * the screen reader rather than a help.
+                     */
+                    <button
+                        type="button"
+                        aria-haspopup="true"
+                        aria-label={ariaLabel}
+                        /* The menu opens on :hover OR :focus-within. A MOUSE
+                           click leaves the button focused, so the menu it
+                           opened stayed pinned while hovering the next group
+                           opened that one too — two dropdowns at once. Blur
+                           on pointer clicks only: e.detail is the click
+                           count, 0 for keyboard "clicks", so Tab + Enter
+                           users keep the focus that holds their menu open. */
+                        onClick={(e) => {
+                            if (e.detail > 0) {
+                                e.currentTarget.blur();
+                            }
+                        }}
+                    >
+                        {contents}
+                    </button>
                 ) : (
-                    <span>{n.label}</span>
+                    <span aria-label={ariaLabel}>{contents}</span>
                 )}
                 {renderChildren()}
             </li>
@@ -719,10 +832,16 @@ function Navigation({
         // says, and this state has to be reversible — switching a feature
         // back on must restore the menu item without a page reload, which
         // dropping it from the list would not.
+        //
+        // `hide: true` in the navigation config is the STATIC spelling of the
+        // same state — a page an app keeps routable but out of the menu (the
+        // same flag <Form> honours on a field). Deleting the entry would work
+        // too, but then the config could no longer say why it is absent.
         const isSwitchedOff = (nav) =>
-            featureFlags !== null &&
-            Boolean(nav.id) &&
-            featureFlags[nav.id] === false;
+            nav.hide === true ||
+            (featureFlags !== null &&
+                Boolean(nav.id) &&
+                featureFlags[nav.id] === false);
 
         setNavData((prevNavData) => {
             const updatePermissions = (nav) => {
@@ -743,7 +862,24 @@ function Navigation({
                     const updatedChildren = nav.children
                         .map(updatePermissions)
                         .filter(Boolean);
-                    const childPermission = updatedChildren.length > 0;
+                    /*
+                     * A group with nothing in it that this user may open is
+                     * not a group, it is a dead heading — so the parent goes
+                     * with its children.
+                     *
+                     * This was `updatedChildren.length > 0`, which is a test
+                     * of whether the config declared any children at all:
+                     * `updatePermissions` always returns an object, so the
+                     * `.filter(Boolean)` above it never removes one and the
+                     * length is a constant read off the JSON. Every group
+                     * parent therefore showed for everybody, opening onto an
+                     * empty menu — which is precisely what the cascade was
+                     * written to prevent.
+                     */
+                    const childPermission = updatedChildren.some(
+                        (child) =>
+                            child.permission === true && child.hidden !== true
+                    );
 
                     if (nav.permissionKey) {
                         const matchingPermission = permissions.includes(

package/src/components/generic/GenericAuth.jsx

@@ -112,6 +112,14 @@ const GenericAuth = ({
     // Extra props handed to whatever `mainComponent` is, for a custom shell
     // that needs something GenericMain does not take.
     mainComponentProps = {},
+    // Live counts for navigation items, `{ tickets: 4 }`, handed down to
+    // Navigation through the shell. First-class rather than something to bury
+    // in `mainComponentProps` because it travels the same route `userProfile`
+    // does and belongs to the same interface — and an app whose counts are
+    // computed inside its own shell (the usual case, since the shell is where
+    // the websocket lives) simply passes its own `navBadges` from there
+    // instead, which lands after this one and wins.
+    navBadges = {},
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
@@ -404,6 +412,7 @@ const GenericAuth = ({
                                 userProfile={userProfile}
                                 enforce2FA={enforce2FA}
                                 density={density}
+                                navBadges={navBadges}
                                 {...mainComponentProps}
                             />
                         }

package/src/components/generic/GenericDashboard.jsx

@@ -1101,7 +1101,9 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                                         </label>
                                         <select
                                             name="year"
-                                            style={{ height: '51px' }}
+                                            style={{
+                                                height: 'var(--field-height, 50px)',
+                                            }}
                                             value={
                                                 filters[widget.id]?.[
                                                     filter.id

package/src/components/generic/GenericMain.jsx

@@ -38,6 +38,11 @@ const GenericMain = ({
     // Passed straight to Navigation: per-id renderers for account actions.
     // See the `renderers` note in Navigation.jsx.
     navRenderers = {},
+    // Passed straight to Navigation as `badges`: live counts keyed by nav id,
+    // `{ tickets: 4 }`. Threaded rather than fetched here for the same reason
+    // `navRenderers` is — the shell does not know what a project counts, who
+    // is allowed to see it, or how often it changes. See navBadges.js.
+    navBadges = {},
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
@@ -151,6 +156,7 @@ const GenericMain = ({
                     themeType={themeType}
                     userProfile={userProfile}
                     renderers={navRenderers}
+                    badges={navBadges}
                 />
             </header>
             {navigation.hasOwnProperty('quickActions') && (
@@ -182,6 +188,7 @@ const GenericMain = ({
             themeType={themeType}
             userProfile={userProfile}
             renderers={navRenderers}
+            badges={navBadges}
         >
             <div className={styles['content-main']} id="app">
                 <div className={styles.paddingSimple}>

package/src/components/navBadges.js

@@ -0,0 +1,152 @@
+/**
+ * The count pill a navigation item wears.
+ *
+ * Split out of Navigation.jsx for the same reason navActive.js was: the rule
+ * is a handful of judgement calls — what counts as "no badge", what a group
+ * parent shows, where the cap falls — and every one of them is testable
+ * without a DOM, a router or a stylesheet. Navigation.jsx renders what this
+ * file decides and decides nothing itself.
+ *
+ * The consumer publishes `badges` on <Navigation> as `{ [navId]: number }`:
+ *
+ *     badges={{ tickets: 4 }}                       -> "4", "Tickets, 4 open"
+ *     badges={{ tickets: { count: 4, label: 'unread' } }}
+ *                                                   -> "4", "Tickets, 4 unread"
+ *
+ * The object form exists because the pill itself is only a number and the
+ * accessible name has to say what the number IS — a screen reader announcing
+ * "Tickets, 4" has told the user nothing. `open` is the default noun because
+ * that is what a count on a work queue almost always means; anything else
+ * says so.
+ */
+
+/** The noun the accessible name falls back to. See the note above. */
+export const DEFAULT_BADGE_NOUN = 'open';
+
+/**
+ * Above this the pill reads `99+`.
+ *
+ * Not a style choice: the bar is a fixed-height row of items and a four-digit
+ * pill pushes the label it belongs to out of the bar. The ACCESSIBLE name
+ * still carries the real figure — a reader that cannot see the pill has no
+ * reason to be given a rounded one.
+ */
+export const BADGE_MAX = 99;
+
+/**
+ * One badge value, whatever shape the consumer published it in.
+ *
+ * Everything that is not a positive, finite number is "no badge" and returns
+ * null — 0, undefined, null, NaN, a string that will not parse, a negative.
+ * That is deliberate and it is the common case: a count endpoint that has not
+ * answered yet, or has answered zero, must render nothing at all rather than
+ * a "0" pill announcing that there is nothing to do.
+ */
+const normalise = (raw) => {
+    if (raw === null || raw === undefined) {
+        return null;
+    }
+
+    const isObject = typeof raw === 'object';
+    const count = Number(isObject ? raw.count : raw);
+
+    if (!Number.isFinite(count) || count <= 0) {
+        return null;
+    }
+
+    const whole = Math.floor(count);
+
+    return {
+        count: whole,
+        // EVERY badge carries what the pill prints, not only the summed one
+        // navBadge() builds. The settings chips feed BadgePill straight from
+        // badgeFor(), and the first one shipped without this line rendered a
+        // green circle with no number in it — the aria-label read "1 open"
+        // off `count` while the pill printed an undefined `display`.
+        display: badgeDisplay(whole),
+        noun: (isObject && raw.label) || DEFAULT_BADGE_NOUN,
+    };
+};
+
+/** What the pill prints: the count, or `99+` once it runs past the cap. */
+export const badgeDisplay = (count) =>
+    count > BADGE_MAX ? `${BADGE_MAX}+` : String(count);
+
+/**
+ * The badge for one id, or null.
+ *
+ * @param {object} badges  the `{ [navId]: number }` map, or nothing.
+ * @param {string} id      the nav entry's id.
+ */
+export function badgeFor(badges, id) {
+    if (!badges || !id) {
+        return null;
+    }
+
+    return normalise(badges[id]);
+}
+
+/**
+ * The badge a nav ITEM shows: its own count plus its visible children's.
+ *
+ * A group parent has no page of its own, so the only honest thing for it to
+ * show is the sum of what is behind it — otherwise a count published against
+ * a child inside a closed dropdown is invisible until somebody happens to
+ * hover the parent, which defeats the point of a badge.
+ *
+ * Children that are hidden or not permitted are NOT counted. A number the
+ * reader cannot act on — because the row it belongs to is not in their menu —
+ * is worse than no number: they would go looking for work that is not theirs.
+ *
+ * @returns {{count: number, display: string, noun: string}|null}
+ */
+export function navBadge(badges, nav) {
+    if (!badges || !nav) {
+        return null;
+    }
+
+    const found = [badgeFor(badges, nav.id)];
+
+    (nav.children || []).forEach((child) => {
+        if (child && child.hidden !== true && child.permission === true) {
+            found.push(badgeFor(badges, child.id));
+        }
+    });
+
+    const parts = found.filter(Boolean);
+
+    if (parts.length === 0) {
+        return null;
+    }
+
+    const count = parts.reduce((sum, part) => sum + part.count, 0);
+
+    return {
+        count,
+        display: badgeDisplay(count),
+        // The parent borrows the noun of the first thing that contributed;
+        // a group whose children count different nouns cannot be summarised
+        // in one word anyway, and in practice one child carries the badge.
+        noun: parts[0].noun,
+    };
+}
+
+/**
+ * The item's accessible name, with the count folded into it.
+ *
+ * `undefined` when there is no badge, so the caller can spread it onto the
+ * element and leave the natural text as the name — an aria-label that merely
+ * repeats the visible label is noise a screen reader has to read anyway.
+ *
+ * The REAL count, not the capped display: "Tickets, 340 open" is useful and
+ * "Tickets, 99+ open" is a rendering artefact.
+ */
+export function badgeAriaLabel(label, badge) {
+    if (!badge || !label) {
+        return undefined;
+    }
+
+    return `${label}, ${badge.count} ${badge.noun}`;
+}
+
+export default navBadge;

package/src/components/styles/Field.module.scss

@@ -36,10 +36,15 @@
     box-shadow: none !important;
 }
 
-/* Ensure consistent height between select and button */
+/* Ensure consistent height between select and button.
+
+   `3.1rem` (49.6px) was a guess at "typical input height" and it beat the
+   token rule further down, which is (0,10,1) to this selector's (0,3,1) — so
+   a dropdown with a create button beside it was the one select in the library
+   that did NOT follow `--field-height`. */
 .dropdownContainer:has(.buttonRight) .selectFullWidth select {
-    height: auto;
-    min-height: 3.1rem; /* Match typical input height */
+    height: var(--field-height, 50px);
+    min-height: var(--field-height, 50px);
 }
 
 .buttonRight {
@@ -47,7 +52,9 @@
     align-items: center;
     justify-content: center;
     min-width: 42px;
-    min-height: 3.1rem;
+    /* The button is the right-hand half of the field it is joined to, so it
+       takes the field's height, not its own. */
+    min-height: var(--field-height, 50px);
     background: rgba(var(--primary-color-rgb, 27, 57, 51), 0.08);
     color: var(--primary-color);
     border: 1px solid rgba(var(--primary-color-rgb, 27, 57, 51), 0.25);
@@ -113,8 +120,8 @@
 }
 
 .dropdownContainer.hasButton .selectFullWidth select {
-    height: auto;
-    min-height: 3.1rem;
+    height: var(--field-height, 50px);
+    min-height: var(--field-height, 50px);
 }
 
 .formcontainer {
@@ -382,7 +389,15 @@ select:not(:placeholder-shown) + .fi__span {
     font-size: 0.85rem;
     background: white;
     border-radius: var(--br);
-    padding: 0.85rem;
+    /* Was `padding: 0.85rem`, and that one declaration is what made a form
+       row uneven. This selector list carries three specificities: `.formItem
+       select` and `.formItem textarea` are (0,1,1) and BEAT the bare `select`
+       / `textarea` in global.css, while `.formItem input[type]:not()…` is
+       (0,10,1) and LOSES to the twenty-clause chain there. So the same rule
+       set the select's padding and not the input's — 0.85rem on one, 1rem on
+       the other, 42.78px beside 50px. Padding is horizontal only now, the box
+       is `--field-height`, and both files state the same thing. */
+    padding: 0 1rem;
     outline: none;
     width: 100%;
     box-sizing: border-box;
@@ -390,6 +405,23 @@ select:not(:placeholder-shown) + .fi__span {
     transition: box-shadow 0.15s linear;
 }
 
+/* Everything above except the textarea is a single-line control and takes the
+   one height. Stated here as well as in global.css because of the specificity
+   split described above: without it the `select` in a form would keep sizing
+   itself off its own line box. */
+.formItem select,
+.formItem
+    input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
+        [type='checkbox']
+    ):not([type='radio']):not(.inovua-react-toolkit-combo-box__input):not(
+        .inovua-react-toolkit-date-input__input
+    ):not(.inovua-react-toolkit-text-input__input):not(
+        .inovua-react-toolkit-numeric-input__input
+    ) {
+    height: var(--field-height, 50px);
+    min-height: var(--field-height, 50px);
+}
+
 .formItem textarea:hover,
 .formItem select:hover,
 .formItem
@@ -415,6 +447,13 @@ select:not(:placeholder-shown) + .fi__span {
 
 .formItem textarea {
     line-height: 1.65 !important;
+    /* The one control that keeps vertical padding — but the amount is derived
+       from the same token, so its first row sits on the same line as the
+       single-line fields beside it instead of at an unrelated 0.85rem. The
+       literal is the fallback for browsers without the `lh` unit. */
+    height: auto;
+    padding: 0.85rem 1rem;
+    padding: calc((var(--field-height, 50px) - 1lh) / 2 - 1px) 1rem;
 }
 
 input[type='file'] {

package/src/components/styles/MultiSelect.module.scss

@@ -93,7 +93,7 @@
 
     // Control styles
     .visns-select__control {
-        min-height: var(--field-height, 51px) !important;
+        min-height: var(--field-height, 50px) !important;
         height: auto !important; /* Allow height to grow with content */
         overflow: visible !important;
     }
@@ -199,7 +199,7 @@
     // CSS class fixes for React Select
     .css-13cymwt-control,
     .css-t3ipsp-control {
-        min-height: var(--field-height, 51px) !important;
+        min-height: var(--field-height, 50px) !important;
         height: auto !important;
         overflow: visible !important;
     }

package/src/components/styles/Navigation.module.scss

@@ -429,7 +429,14 @@
                 }
             }
 
-            &:hover > ul {
+            /* `:focus-within` matches the item while the parent itself holds
+               focus, which is what opens the menu for a keyboard user: tab to
+               the group heading, the rows appear, tab again and focus moves
+               into them — and the menu stays open because focus is still
+               inside the item. Without this the dropdown was hover-only and
+               every page inside a group was unreachable without a mouse. */
+            &:hover > ul,
+            &:focus-within > ul {
                 display: block;
                 opacity: 1;
             }
@@ -553,7 +560,9 @@
                 }
             }
 
-            &:hover > ul {
+            /* Same keyboard path as `.nav-item` above. */
+            &:hover > ul,
+            &:focus-within > ul {
                 display: block;
                 opacity: 1;
             }
@@ -561,6 +570,65 @@
     }
 }
 
+/* ----------------------------------------------------------------------------
+   Count pills
+   ----------------------------------------------------------------------------
+   `<Navigation badges={{ tickets: 4 }} />`. The pill is inline — part of the
+   item's own flex row rather than a floating dot pinned to a corner — because
+   these items are text labels of wildly different widths, and an absolutely
+   positioned badge on "Support Blocks" lands somewhere quite different from
+   one on "Zoom". Sitting in the row, it simply follows the label everywhere,
+   dropdown rows and the sidebar included.
+
+   The colour carries a fallback for the same reason Notification's badge
+   does: a `var()` with no fallback on a token the host has not declared is
+   invalid at computed-value time and the WHOLE declaration is discarded, so
+   the pill would render its white text on nothing at all — and the pill is
+   the only place the count appears.
+   ------------------------------------------------------------------------- */
+.nav-badge {
+    /* Round at any single-digit width, and a lozenge once it reads `99+`.
+       SIZED TO MATCH the bell's and the SMS badge (16px box, 10px digit) —
+       "two unread counts side by side have to sit on the same line as each
+       other", per Sms.module.scss, and a 14px pill beside their 16px read as
+       an error rather than a choice. */
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    border-radius: var(--radius-pill, 999px);
+    background-color: var(--secondary-color, #3cbf7d);
+    /* DARK ink, not white. The other badges are white-on-crimson; this one's
+       ground is the brand GREEN, and a 10px white digit on #3cbf7d has so
+       little contrast it reads as a solid dot — which is exactly how it was
+       reported: "a green circle with no number". */
+    color: var(--primary-color, #1b3933);
+    /* Never inheriting the semibold the active item puts on its label — a
+       badge that grows when you are standing on the page it counts reads as
+       a change in the number. */
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+}
+
+/* In a dropdown row the label is a block-level link, so the pill is pushed to
+   the row's trailing edge rather than butted against the text. Both themed
+   selectors are spelled out to match the specificity of the blocks above —
+   anything shorter loses to the `display: block` they already set on these
+   links and the rule would simply never apply. */
+.app-nav .nav-item > ul li > a,
+.app-nav .nav-item-alternate > ul li > a {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
 .hactions {
     width: max-content;
     justify-self: end;
@@ -572,6 +640,23 @@
     padding-left: var(--spacing-md);
     margin-left: var(--spacing-sm);
 
+    /* A count pill on an icon chip sits on the chip's shoulder, not inline —
+       these are 36px targets and an inline pill would push the icon off
+       centre. The anchor is the chip itself, and the pill stays INSIDE its
+       box: the chip row is a scroll container (see the overflow comment
+       below), and a scroll container clips both axes — a pill overhanging
+       the edge by 2px rendered as a numberless green sliver. */
+    > ul > li > a {
+        position: relative;
+
+        .nav-badge {
+            position: absolute;
+            top: 1px;
+            right: 1px;
+            margin: 0;
+        }
+    }
+
     > ul {
         list-style: none;
         display: flex;
@@ -1079,8 +1164,20 @@
                         opacity: 1;
                     }
 
-                    span {
+                    /* The group heading — an item with children and no page
+                       of its own. It used to be a <span>; it is a <button>
+                       now so it can take focus (see Navigation.jsx), and the
+                       button has to keep the span's rendering exactly, hence
+                       the reset of the three properties a UA stylesheet would
+                       otherwise force on it. */
+                    span,
+                    > button {
                         display: block;
+                        width: 100%;
+                        text-align: left;
+                        border: none;
+                        font: inherit;
+                        cursor: pointer;
                         color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.3);
                         box-sizing: border-box;
                         padding: 1.25em 0.85em;

package/src/components/styles/global.css

@@ -39,16 +39,6 @@ select {
     font: inherit;
 }
 
-/* Floor under every textarea: the browser default (`rows` omitted) is two
-   lines, which renders a multi-line field as a slit. Three lines of text
-   plus the field's own padding is the least a free-text box can be and
-   still read as one. A bare element selector, so any component that sets
-   its own height with a class still wins. */
-textarea {
-    min-height: 5.5em; /* ~3 lines + padding, for browsers without lh */
-    min-height: calc(3lh + 2rem);
-}
-
 /* Global radio button styling */
 input[type='radio'],
 .radio-input {
@@ -295,7 +285,22 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.15);
     box-shadow: none;
-    padding: 1rem;
+    /* THE height of a form control, stated once. It used to be an accident of
+       `padding: 1rem` plus a 0.85rem line box — which computed to 50px on a
+       text input, 42.78px on a `<select>` (a CSS-module rule beat this one on
+       padding for the bare `select` selector but not for the twenty-clause
+       `input` chain), 34px on a date input and 51px on react-select, four
+       heights in one two-column form. Now the box is the token and the padding
+       is horizontal only, so every control below lands on the same number and
+       a consumer moves all of them together by setting `--field-height` on any
+       ancestor.
+
+       The 50px default is not a round number picked for looks: it is what a
+       plain text input measured under the old `padding: 1rem` rule, so a
+       project that never heard of this token renders exactly as it did. */
+    height: var(--field-height, 50px);
+    min-height: var(--field-height, 50px);
+    padding: 0 1rem;
     outline: none;
     box-sizing: border-box;
     color: var(--paragraph-color);
@@ -309,33 +314,58 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     }
 }
 
-/* Native date / time inputs are excluded from the padded rule above: 1rem of
-   padding inside a date control made it ~48px and, in Firefox, sat the value
-   low. They get a flat 34px control instead, matching the grid filters. */
-input[type='date'],
-input[type='datetime-local'],
-input[type='time'] {
+/* A textarea is multi-line by definition, so it is the one control that opts
+   out of the fixed height — it keeps the font and the horizontal padding, and
+   takes the vertical padding that puts its FIRST row on the same line as the
+   single-line fields beside it. Written twice: the `lh` unit is what makes the
+   centring exact, and the literal is for browsers without it. No guard against
+   a `--field-height` shorter than one line is needed — CSS clamps a negative
+   `calc()` result for padding to zero rather than dropping the declaration.
+
+   The `min-height` is a floor: the browser default (`rows` omitted) is two
+   lines, which renders a free-text box as a slit. */
+textarea {
+    height: auto;
+    padding: 0.85rem 1rem;
+    padding: calc((var(--field-height, 50px) - 1lh) / 2 - 1px) 1rem;
+    min-height: 5.5em; /* ~3 lines + padding, for browsers without lh */
+    min-height: calc(3lh + 2rem);
+}
+
+/* Native date / time inputs are excluded from the chained rule above — the
+   `:not([type='date'])` clauses are in it — so they restate the same box here
+   rather than inheriting it. They used to be pinned to a flat 34px, which is
+   the grid filter row's height and 16px short of every other field in a form.
+
+   The grid's own filter input keeps its opt-out: it lives inside a 32px
+   toolbar row that `global-datagrid.css` sizes, not inside a form. */
+input[type='date']:not(.visns-native-date-filter__input),
+input[type='datetime-local']:not(.visns-native-date-filter__input),
+input[type='time']:not(.visns-native-date-filter__input) {
     box-sizing: border-box;
-    height: 34px;
-    min-height: 34px;
-    padding: 0 10px;
+    height: var(--field-height, 50px);
+    min-height: var(--field-height, 50px);
+    padding: 0 1rem;
     border: 1px solid rgba(var(--paragraph-color-rgb, 31, 31, 31), 0.15);
     border-radius: var(--br, 4px);
     background: #fff;
     color: var(--paragraph-color, #1f1f1f);
     font-family: inherit;
     font-size: 0.85rem;
-    line-height: 32px;
+    /* Was a hardcoded 32px, one pixel under the old 34px box. A number tied to
+       a height this rule no longer states has to go; the value is centred by
+       `Form.module.scss`, which flexes these inputs. */
+    line-height: normal;
     font-variant-numeric: tabular-nums;
 }
 
 @-moz-document url-prefix() {
-    input[type='date'],
-    input[type='datetime-local'],
-    input[type='time'] {
-        height: 34px;
-        padding: 0 8px;
-        line-height: 32px;
+    input[type='date']:not(.visns-native-date-filter__input),
+    input[type='datetime-local']:not(.visns-native-date-filter__input),
+    input[type='time']:not(.visns-native-date-filter__input) {
+        height: var(--field-height, 50px);
+        padding: 0 1rem;
+        line-height: normal;
     }
 }
 
@@ -1052,10 +1082,13 @@ form div:has(.react-toggle) input[type='checkbox'] {
    ------------------------------------------------------------------------ */
 
 .visns-select__control {
-    /* Same token the native inputs below use. 51px was 3px taller than a text
-       input, which is exactly the kind of difference nobody can name but
-       everybody sees when the two sit side by side in one form. */
-    min-height: var(--field-height, 51px);
+    /* The same token every native control above is now sized from, and the
+       same 50px default: react-select renders divs, so the chained `input[type]`
+       rule never reached it and its height was a separate number (51px) that
+       only happened to be close. `min-height` and not `height`, because a
+       multi-select has to grow as chips wrap — with one value it is exactly a
+       text input, with three it is taller than one on purpose. */
+    min-height: var(--field-height, 50px);
     border: 1px solid rgba(var(--paragraph-rgb, 43, 43, 43), 0.15) !important;
     border-radius: var(--br, 5px) !important;
     background: var(--background-color, #fff);