@visns-studio/visns-components 6.3.2 → 6.3.4

package/package.json

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

package/src/components/Field.jsx

@@ -2306,6 +2306,11 @@ function Field({
                                     data-name={settings.id}
                                     type="radio"
                                     className={`${styles.fi__customcheckbox} radio-input`}
+                                    // Radio renderers previously ignored the
+                                    // field's read-only state, leaving
+                                    // `readOnlyWhen` configs claiming a lock
+                                    // the UI didn't enforce.
+                                    disabled={isFieldReadOnly}
                                     value={option.id}
                                     checked={
                                         inputValue !== undefined &&
@@ -2336,6 +2341,11 @@ function Field({
                                     data-name={settings.id}
                                     type="radio"
                                     className={`${styles.fi__customcheckbox} radio-input`}
+                                    // Radio renderers previously ignored the
+                                    // field's read-only state, leaving
+                                    // `readOnlyWhen` configs claiming a lock
+                                    // the UI didn't enforce.
+                                    disabled={isFieldReadOnly}
                                     value={option.id}
                                     checked={
                                         inputValue !== undefined &&

package/src/components/Form.jsx

@@ -115,6 +115,12 @@ function Form({
     const [inputClass, setInputClass] = useState({});
     const [tableData, setTableData] = useState({ columns: [], dataSource: [] });
     const [tableProps, setTableProps] = useState({});
+    // A `save.return.type: 'table'` form (the report filter rows in
+    // GenericDetail) renders nothing at all when the query comes back empty,
+    // so "no rows matched" and "you have not run it yet" looked identical: an
+    // unchanged blank panel under a "generated successfully" toast. This
+    // separates the two so the empty result can say so.
+    const [hasQueried, setHasQueried] = useState(false);
     const [uploadProgress, setUploadProgress] = useState(0);
 
     // Group selection state management
@@ -2091,6 +2097,11 @@ function Form({
                                     );
                                 }
 
+                                // Set before the branch: an empty result is
+                                // still a result, and that is the case the
+                                // empty state exists for.
+                                setHasQueried(true);
+
                                 if (
                                     res.data[formSettings.save.return.param]
                                         ?.length > 0
@@ -3300,6 +3311,27 @@ function Form({
                             />
                         </div>
                     )}
+
+                    {/* Empty result. Only ever after a run — before that the
+                        panel is a filter row waiting to be used, and telling
+                        the user there is nothing there would be wrong. Copy is
+                        overridable per report via `save.return.empty`. */}
+                    {hasQueried &&
+                        formSettings?.save?.return?.type === 'table' &&
+                        !(tableData?.dataSource?.length > 0) && (
+                            <div
+                                className={`${styles.formItem} ${styles.fwItem} ${styles.emptyResult}`}
+                            >
+                                <p>
+                                    {formSettings.save.return.empty?.title ||
+                                        'No records matched'}
+                                </p>
+                                <span>
+                                    {formSettings.save.return.empty?.message ||
+                                        'Nothing came back for these filters. Widen them and run the report again.'}
+                                </span>
+                            </div>
+                        )}
                 </form>
                 <div className={styles.polActions}>
                     {formSettings.hasOwnProperty('customButton') &&

package/src/components/generic/GenericDetail.jsx

@@ -2679,6 +2679,22 @@ function GenericDetail({
                                             >
                                                 <span>{formConfig.title}</span>
                                             </div>
+                                            {/* Optional one-line subtitle. A
+                                                report tab is a name and a set
+                                                of controls with nothing saying
+                                                what it returns; a tab that has
+                                                something to say can now say
+                                                it, and one that has not is
+                                                unchanged. */}
+                                            {formConfig.description && (
+                                                <p
+                                                    className={
+                                                        styles.gridtxt__description
+                                                    }
+                                                >
+                                                    {formConfig.description}
+                                                </p>
+                                            )}
                                             <Form
                                                 key={`form-${activeTabConfig.id}`}
                                                 columnId={routeParams[urlParam]}

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

@@ -205,8 +205,16 @@
     }
 }
 
+/* The gallery modal's close control — this class is consumed by
+   modals/GalleryModal.jsx, which imports this stylesheet (DataGrid.jsx itself
+   never uses it). Same hardening as the header close in Form.module.scss; the
+   long note on the svg block there explains why a close glyph needs an
+   explicit box and `flex: none` rather than trusting its size attributes. */
 .modal__close {
     width: max-content;
+    min-width: 2rem;
+    min-height: 2rem;
+    box-sizing: border-box;
     background: rgba(var(--paragraph-rgb), 0.05);
     cursor: pointer;
     padding: 0.25rem;
@@ -225,6 +233,9 @@
     }
 
     svg {
+        width: 1.25rem;
+        height: 1.25rem;
+        flex: none;
         color: var(--primary-color);
         display: block;
     }

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

@@ -708,24 +708,52 @@ input[type='file']:hover {
                 font-size: 1.15em;
             }
 
+            /* The "Edit Canvas" modal's close control (Field.jsx). Hardened
+               the same way as the header close in Form.module.scss — see the
+               note on the svg block there. */
             .modal__close {
                 width: max-content;
+                min-width: 2rem;
+                min-height: 2rem;
                 position: absolute;
                 right: 5px;
                 top: 5px;
                 box-sizing: border-box;
-                background: rgba(var(--primary-color), 1.08);
+                /* Was `rgba(var(--primary-color), 1.08)`, which is not a
+                   colour: `--primary-color` is a hex, rgba() wants three
+                   channels, and an alpha above 1 is out of range either way.
+                   The declaration was invalid and dropped, so this button had
+                   no background at all. It sits on `&__header`, which is
+                   `var(--primary-color)`, so what it wants is a light lift off
+                   that ground — the same treatment the equivalent control in
+                   GenericFormBuilder.module.scss uses on its coloured header. */
+                background: rgba(255, 255, 255, 0.15);
                 cursor: pointer;
                 padding: 8px 8px;
                 margin: 0;
                 outline: none;
                 border: none;
                 border-radius: var(--br);
-                display: block;
+                display: flex;
+                align-items: center;
+                justify-content: center;
                 line-height: 1;
+                transition: background 0.2s ease;
+
+                &:hover {
+                    background: rgba(255, 255, 255, 0.25);
+                }
 
                 svg {
-                    color: var(--secondary-color);
+                    width: 1.25rem;
+                    height: 1.25rem;
+                    flex: none;
+                    /* The header behind this is `--primary-color`, so the
+                       glyph is set against it rather than in a brand hue that
+                       may be a near-match for it. Field.jsx also passes
+                       `color="#FFF"`, which lucide writes as a `stroke`
+                       attribute; this keeps the two in agreement. */
+                    color: #fff;
                     display: block;
                 }
             }

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

@@ -242,23 +242,63 @@ input[type='file'] {
     justify-content: center;
     width: 2rem;
     height: 2rem;
+    /* The box is stated three ways on purpose. `width`/`height` alone is not a
+       box a consuming app cannot move: every one of these buttons lives under
+       whatever ambient `button { … }` rule the host stylesheet carries, and
+       with the library's own `* { box-sizing: border-box }` in play, a host
+       padding rule eats this button's *content* box rather than growing it.
+       The min-* pair holds the outer size and `box-sizing` states the
+       assumption rather than inheriting it — but see the svg block for what
+       actually keeps the glyph safe. */
+    min-width: 2rem;
+    min-height: 2rem;
+    box-sizing: border-box;
     flex: none;
     background: none;
     cursor: pointer;
     padding: 0;
     margin: 0;
     border: none;
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-sm, 6px);
     line-height: 1;
-    transition: background-color var(--speed) var(--ease);
+    transition: background-color var(--speed, 0.18s) var(--ease, ease);
 
     &:hover {
-        background: var(--hover-color);
+        background: var(--hover-color, rgba(var(--paragraph-color-rgb, 34, 30, 51), 0.06));
     }
 
     svg {
-        color: var(--muted-color);
+        /* This is the rule that stops the icon disappearing.
+
+           An `<svg width="24" height="24">` inside a flex container is a flex
+           item with the default `flex-shrink: 1`, so when the button's content
+           box is squeezed the glyph shrinks with it — all the way down.
+           Hartway's plant-floor stylesheet carries
+           `body.tablet-mode button:not([class*='InovuaReactDataGrid'])
+            { padding: 8px 14px }`,
+           which outweighs this module's single class (0,2,2 against 0,1,0) and
+           left a 2rem border-box button with a 4px content box; the X
+           collapsed with it and read as a smudge at the end of the header.
+
+           `flex: none` refuses to shrink, and the explicit width/height also
+           makes the glyph immune to the `width: 100%` sizing pattern used on
+           svgs elsewhere in this library. Both are needed: the size fixes the
+           basis, `flex: none` stops it being overruled. Sized here rather than
+           trusting the `size` prop at each call site, so every modal header
+           agrees on one glyph. */
+        width: 1.25rem;
+        height: 1.25rem;
+        flex: none;
+        /* Recessive, but a control the user has to be able to find has no
+           business being fainter than the body text around it. */
+        color: var(--muted-color, #6b7688);
         display: block;
+        transition: color var(--speed, 0.18s) var(--ease, ease);
+    }
+
+    &:hover svg,
+    &:focus-visible svg {
+        color: var(--paragraph-color, #374151);
     }
 }
 
@@ -295,43 +335,54 @@ input[type='file'] {
 
 
 
-.saveBtn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
+/* The form's primary action (Save / View Report / Refresh).
 
-    &:hover {
-        color: var(--primary-color);
-        background: var(--highlight-color);
-        border: 1px solid rgba(var(--highlight-rgb), 1.05);
-    }
+   This was a bespoke button — 1.25em type on 0.65rem padding, its own radius
+   token, its own transition curve, and a hover that swapped to pale blue on
+   blue. Sat next to `.btn` (the shared primary) in the same action bar, so the
+   two controls that are meant to read as a pair were a different height, a
+   different type size and a different hover. It is the same button as every
+   other primary in the library; it just needed to say so. */
+.saveBtn {
+    @include button-primary;
 }
 
+/* The inline form's action bar.
+
+   Was `position: fixed; bottom: 15px; right: 20px` with `float: left`
+   children: the buttons left the form entirely and parked in the corner of
+   the *viewport*. On a short form (the report filter rows in GenericDetail —
+   one row of dropdowns) that put "View Report" nowhere near the filters it
+   runs; on a form that returns a results grid it floated on top of the grid's
+   last rows and its horizontal scrollbar.
+
+   It is a footer to the form it belongs to, so it lives at the end of the
+   form. `sticky` keeps what the fixed positioning was actually for — the
+   action stays reachable while a long form or a 550px results grid is
+   scrolled — without detaching it from its panel. */
 .polActions {
-    position: fixed;
-    bottom: 15px;
-    right: 20px;
-    width: auto;
-    z-index: 100;
+    position: sticky;
+    bottom: 0;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-sm, 0.5rem);
+    width: 100%;
+    margin-top: var(--spacing-lg, 1.5rem);
+    padding: var(--spacing-sm, 0.5rem) 0;
+    /* Opaque, or the form scrolls through the bar while it is stuck. */
+    background: var(--surface-color, #fff);
+    border-top: 1px solid var(--border-color, #e1e1e1);
 }
 
-.polActions button {
-    display: block;
-    float: left;
-    padding: 0.35em 1em;
-    margin: 0 0.15em;
+/* One primary per bar. Download / Sort / Save & Exit are alternatives to the
+   main action, not competitors: identical geometry, no fill. Previously every
+   button in here was a filled brand-blue block, so a filter row offering
+   "Download Report" and "View Report" gave no clue which one was the thing
+   you came to do. */
+.polActions .btn {
+    @include button-secondary;
 }
 
 /* For in-place editing mode */
@@ -381,6 +432,37 @@ input[type='file'] {
     display: none;
 }
 
+/* Empty result for `save.return.type: 'table'` forms. Deliberately not a
+   card and not an alert: an empty report is an ordinary outcome, so it is a
+   quiet block of centred text on the panel it would have filled, drawn with
+   the same hairline the rest of the page separates things with. */
+.emptyResult {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-xs, 0.25rem);
+    padding: var(--spacing-2xl, 3rem) var(--spacing-md, 1rem);
+    text-align: center;
+    border: 1px dashed var(--border-color, #e1e1e1);
+    border-radius: var(--radius-md, 10px);
+    background: var(--alternate-color, transparent);
+
+    p {
+        margin: 0;
+        font-size: var(--font-size-md, 0.9375rem);
+        font-weight: var(--font-weight-semibold, 600);
+        color: var(--heading-color, inherit);
+    }
+
+    span {
+        max-width: 42ch;
+        font-size: var(--font-size-sm, 0.8125rem);
+        line-height: 1.5;
+        color: var(--muted-color, #6e7276);
+    }
+}
+
 .buttonContainer {
     display: flex;
     justify-content: center;

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

@@ -86,15 +86,31 @@
     gap: 0.5rem;
 }
 
+/* The tab rail. Identical spec to `.grid__subnav` in GenericIndex.module.scss
+   — the two pages share one rail, so keep them in step.
+
+   It was a white panel under a 50px brand-tinted blur, holding one tinted blue
+   pill per tab. Every item therefore carried the same weight as the selected
+   one, and a seven-tab rail (the reports page) read as a stack of seven
+   buttons rather than as navigation with one thing chosen. 6.3's answer
+   everywhere else on the page is a flat surface, a hairline and quiet ink, so
+   that is what the rail gets: unselected tabs are plain text on the panel, and
+   the brand blue is spent once, on the tab you are actually on. */
 .grid__subnav {
+    /* `flex: 1` (basis 0) against `.grid__subcontent`'s `flex: 0 1 80%` is
+       left exactly as it was: `.grid__subrow` is `flex-wrap: wrap`, so a
+       flex-basis here large enough to overflow the row would wrap the content
+       panel onto its own line rather than shrink it. Only the treatment
+       changes below. */
     flex: 1;
-    background: white;
+    background: var(--surface-color, #fff);
+    border: 1px solid var(--border-color, #e1e1e1);
     border-radius: var(--br);
     box-sizing: border-box;
-    padding: 5px;
+    padding: var(--spacing-xs, 0.25rem);
     margin: 8px 0;
     height: auto;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+    box-shadow: none;
 }
 
 .grid__subnav > ul {
@@ -108,32 +124,54 @@
 
 .grid__subnav > ul li {
     width: 100%;
-    margin-bottom: 3px;
+    margin-bottom: var(--spacing-xs, 0.25rem);
+}
+
+.grid__subnav > ul li:last-child {
+    margin-bottom: 0;
 }
 
 .grid__subnav > ul li a {
     width: 100%;
-    padding: 0.35rem 1rem;
+    /* 0.35rem was a 5px-tall hit area for a control people click all day. */
+    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
     box-sizing: border-box;
     display: block;
     text-decoration: none;
-    background: rgba(var(--primary-rgb), 0.05);
-    color: var(--primary-color);
-    border-radius: 5px;
-    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-    outline: none;
+    background: none;
+    color: var(--text-color, #374151);
+    font-size: var(--font-size-sm, 0.8125rem);
+    font-weight: var(--font-weight-medium, 500);
+    line-height: 1.35;
+    border-radius: var(--radius-sm, 6px);
+    transition:
+        background-color var(--speed, 0.18s) var(--ease, ease),
+        color var(--speed, 0.18s) var(--ease, ease);
     cursor: pointer;
 }
 
 .grid__subnav > ul li:hover a {
-    background: var(--primary-color);
-    color: var(--background-color);
+    /* Hover is a hint, not a commitment. It used to fill solid brand blue —
+       indistinguishable from the selected tab, so passing the mouse across the
+       rail made it look as though the selection was following the cursor. */
+    background: var(--hover-color, rgba(0, 0, 0, 0.04));
+    color: var(--heading-color, inherit);
 }
 
 .grid__subnav > ul li .subactive {
-    font-weight: 700;
+    font-weight: var(--font-weight-semibold, 600);
     background: var(--primary-color);
-    color: var(--background-color);
+    /* Was --background-color, the page's off-white; white is what the button
+       and nav-pill treatments elsewhere put on this blue. */
+    color: #fff;
+}
+
+/* `outline: none` used to sit on the link with nothing put back, so the rail
+   was unusable by keyboard. The app's own ring token, same as every other
+   control. */
+.grid__subnav > ul li a:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 118, 192, 0.32));
 }
 
 .grid__minheight {
@@ -146,9 +184,12 @@
 
 .grid__subcontent {
     flex: 0 1 80%;
-    background: var(--tertiary-color);
+    background: var(--surface-color, #fff);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--primary-rgb), 0.05);
+    /* Was the brand blue at 5% — a tint so faint the panel had no edge at all
+       while the rail beside it did. The shared hairline, same as every other
+       surface on the page. */
+    border: 1px solid var(--border-color, #e1e1e1);
     box-sizing: border-box;
     padding: 2px;
     margin: 8px 0;
@@ -163,6 +204,24 @@
     margin: 0 0 30px 0;
 }
 
+/* The tab panel's own inset.
+
+   `.gridtxt` had no rule at all, and its container (`.grid__subcontent`,
+   `.grid__full`) carries `padding: 2px` — so a panel's section heading and any
+   form inside it sat 2px from the panel border. Only the overview `<ul>` was
+   readable, because it padded itself. On the reports page that meant the
+   filter row's dropdowns and date pickers were flush against the panel edge.
+
+   The inset belongs to the panel, not to one child of it, so it is stated
+   here once and the `<ul>` below gives up its horizontal padding to match.
+   The `<ul>`'s vertical padding stays: with several heading/list pairs in one
+   `.gridtxt` (the overview tabs) that is what separates one section from the
+   next. */
+.gridtxt {
+    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem)
+        var(--spacing-lg, 1.5rem);
+}
+
 .gridtxt__header {
     width: 100%;
     display: block;
@@ -192,6 +251,21 @@
     font-weight: 700;
 }
 
+/* Optional one-line subtitle under a section heading (GenericDetail renders it
+   from a tab's `description`). Sits in the heading's own space — it belongs to
+   the label, not to the content — so it takes over the heading's bottom margin
+   rather than adding a third gap. */
+.gridtxt__description {
+    /* Pulls back half of the heading's 1rem bottom margin, so the subtitle sits
+       close under its heading and the whole block is separated from the
+       content below rather than floating between the two. */
+    margin: calc(-1 * var(--spacing-sm, 0.5rem)) 0 var(--spacing-lg, 1.5rem);
+    max-width: 70ch;
+    font-size: var(--font-size-sm, 0.8125rem);
+    line-height: 1.55;
+    color: var(--muted-color, #6e7276);
+}
+
 .gridtxt > ul {
     width: 100%;
     display: flex;
@@ -200,7 +274,9 @@
     flex-wrap: wrap;
     list-style: none;
     box-sizing: border-box;
-    padding: 0.85rem;
+    /* Horizontal padding removed — `.gridtxt` owns the panel inset now (see
+       the note there). The vertical padding separates stacked sections. */
+    padding: 0.85rem 0;
     margin: 0;
 }
 

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

@@ -741,8 +741,13 @@ select:not(:placeholder-shown) + .fi__span {
     letter-spacing: 0.01em;
 }
 
+/* The form builder's modal close control (GenericFormBuilder.jsx, two call
+   sites). Hardened the same way as the header close in Form.module.scss — see
+   the note on the svg block there. */
 .modal__close {
     width: max-content;
+    min-width: 2rem;
+    min-height: 2rem;
     position: absolute;
     right: 8px;
     top: 8px;
@@ -754,7 +759,9 @@ select:not(:placeholder-shown) + .fi__span {
     outline: none;
     border: none;
     border-radius: 6px;
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     line-height: 1;
     transition: background 0.2s ease;
 
@@ -764,7 +771,13 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .modal__close svg {
-    color: var(--secondary-color);
+    width: 1.25rem;
+    height: 1.25rem;
+    flex: none;
+    /* `.modal__header` above is `var(--primary-color)`, so the glyph is set
+       against that ground rather than in a second brand hue that may be a
+       near-match for it — which is what `--secondary-color` was doing here. */
+    color: #fff;
     display: block;
 }
 

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

@@ -114,15 +114,19 @@
     gap: 0.5rem;
 }
 
+/* The tab rail. Identical spec to `.grid__subnav` in GenericDetail.module.scss
+   — the two pages share one rail, so keep them in step; the reasoning for the
+   treatment is written out there. */
 .grid__subnav {
     flex: 1;
-    background: white;
+    background: var(--surface-color, #fff);
+    border: 1px solid var(--border-color, #e1e1e1);
     border-radius: var(--br);
     box-sizing: border-box;
-    padding: 5px;
+    padding: var(--spacing-xs, 0.25rem);
     margin: 8px 0;
     height: auto;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+    box-shadow: none;
 }
 
 .grid__subnav > ul {
@@ -136,32 +140,45 @@
 
 .grid__subnav > ul li {
     width: 100%;
-    margin-bottom: 3px;
+    margin-bottom: var(--spacing-xs, 0.25rem);
+}
+
+.grid__subnav > ul li:last-child {
+    margin-bottom: 0;
 }
 
 .grid__subnav > ul li a {
     width: 100%;
-    padding: 0.35rem 1rem;
+    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
     box-sizing: border-box;
     display: block;
     text-decoration: none;
-    background: rgba(var(--primary-rgb), 0.05);
-    color: var(--primary-color);
-    border-radius: 5px;
-    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-    outline: none;
+    background: none;
+    color: var(--text-color, #374151);
+    font-size: var(--font-size-sm, 0.8125rem);
+    font-weight: var(--font-weight-medium, 500);
+    line-height: 1.35;
+    border-radius: var(--radius-sm, 6px);
+    transition:
+        background-color var(--speed, 0.18s) var(--ease, ease),
+        color var(--speed, 0.18s) var(--ease, ease);
     cursor: pointer;
 }
 
 .grid__subnav > ul li:hover a {
-    background: var(--primary-color);
-    color: var(--tertiary-color);
+    background: var(--hover-color, rgba(0, 0, 0, 0.04));
+    color: var(--heading-color, inherit);
 }
 
 .grid__subnav > ul li .subactive {
-    font-weight: 700;
+    font-weight: var(--font-weight-semibold, 600);
     background: var(--primary-color);
-    color: var(--tertiary-color);
+    color: #fff;
+}
+
+.grid__subnav > ul li a:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 118, 192, 0.32));
 }
 
 .grid__subnav__alternate {

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

@@ -1,3 +1,17 @@
+/**
+ * The tab rail's own stylesheet, which predates the 6.3 token language: it was
+ * still drawing its own card (a hardcoded rgba drop shadow and radius) and its
+ * own type scale (0.85/0.9rem literals) around items that the host surface —
+ * `.grid__subnav` in GenericIndex/GenericDetail — already frames. Two nested
+ * cards, two shadows, and a rail whose type did not match anything else on the
+ * page. Everything here now reads the same tokens as the rest of the library,
+ * and the framing is left to the surface it sits on.
+ *
+ * Literal fallbacks throughout: a bare `var()` for a token a consuming app has
+ * not declared is invalid at computed-value time and the whole declaration is
+ * dropped, which is exactly how a rail like this loses its padding.
+ */
+
 .tableFilterContainer {
     width: 100%;
     position: relative;
@@ -9,11 +23,11 @@
     list-style: none;
     padding: 0;
     margin: 0;
-    font-size: 0.9rem;
+    font-size: var(--font-size-sm, 0.8125rem);
     width: 100%;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    /* No radius, no shadow, no `overflow: hidden`. The panel around this list
+       supplies the surface; the clipping additionally cut the focus ring off
+       the first and last items. */
 }
 
 /* Parent category styling */
@@ -29,19 +43,23 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 16px;
-    font-weight: 600;
-    font-size: 0.9rem;
+    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
+    border-radius: var(--radius-sm, 6px);
+    font-weight: var(--font-weight-semibold, 600);
+    font-size: var(--font-size-sm, 0.8125rem);
     background-color: var(--primary-color, #000);
-    color: var(--tertiary-color, #fff);
-    transition: all 0.2s ease;
+    color: #fff;
+    /* Was `all 0.2s`, which animates layout properties too. */
+    transition:
+        background-color var(--speed, 0.18s) var(--ease, ease),
+        color var(--speed, 0.18s) var(--ease, ease);
     position: relative;
     text-decoration: none;
 }
 
 .parentLink:hover {
-    background-color: var(--secondary-color, #222) !important;
-    color: var(--tertiary-color, #fff) !important;
+    background-color: var(--primary-color-darker, #222) !important;
+    color: #fff !important;
     text-decoration: none;
 }
 
@@ -63,7 +81,9 @@
     overflow: hidden;
     transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
     opacity: 0;
-    background-color: var(--bg-color, #f5f5f5);
+    /* Flush with the rail. The child links carry their own hover surface now,
+       so a tint behind the whole submenu only made a second panel edge. */
+    background: none;
 }
 
 .visibleMenu {
@@ -74,7 +94,7 @@
 .childItem {
     margin: 0;
     position: relative;
-    border-bottom: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.03);
+    border-bottom: 1px solid var(--border-color, #e1e1e1);
 }
 
 .childItem:last-child {
@@ -82,18 +102,20 @@
 }
 
 .childLink {
-    padding: 6px 16px 6px 26px;
-    background-color: var(--bg-color, #f5f5f5);
-    color: var(--paragraph-color, #333);
-    font-weight: normal;
-    font-size: 0.85rem;
+    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem)
+        var(--spacing-xl, 1.75rem);
+    background: none;
+    color: var(--text-color, #333);
+    font-weight: var(--font-weight-regular, 400);
+    font-size: var(--font-size-sm, 0.8125rem);
+    border-radius: var(--radius-sm, 6px);
     display: block;
     text-decoration: none;
 }
 
 .childLink:hover {
     background-color: var(--hover-color, #e8e8e8) !important;
-    color: var(--primary-color, #000) !important;
+    color: var(--heading-color, #000) !important;
     text-decoration: none;
 }
 
@@ -104,37 +126,55 @@
     color: rgba(var(--paragraph-color-rgb, 153, 153, 153), 0.6);
 }
 
-/* Active states */
+/* Active states. The brand fill is the one loud thing in the rail, and it
+   marks exactly one item — which is what makes it readable as a selection
+   rather than as decoration. */
 .subactive {
-    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
     background: var(--primary-color, #000) !important;
-    color: var(--tertiary-color, #fff) !important;
+    /* Was --tertiary-color, which several projects set to their page
+       off-white; white is what sits on this blue elsewhere. */
+    color: #fff !important;
 }
 
 .subactivechildren {
-    font-weight: 500;
-    background-color: var(--hover-color, #f0f0f0) !important;
+    font-weight: var(--font-weight-medium, 500);
+    background-color: var(--primary-color-light, #f0f0f0) !important;
     color: var(--primary-color, #000) !important;
 }
 
-/* Base link styling */
+/* Base link styling. Unselected tabs are text on the panel, not tinted
+   blocks — see the note on `.grid__subnav` in GenericDetail.module.scss. */
 .link {
     display: block;
-    padding: 6px 16px;
+    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
     text-decoration: none;
-    background: var(--bg-color, #f5f5f5);
-    color: var(--paragraph-color, #333);
-    font-size: 0.85rem;
-    transition: all 0.2s ease;
+    background: none;
+    color: var(--text-color, #333);
+    font-size: var(--font-size-sm, 0.8125rem);
+    font-weight: var(--font-weight-medium, 500);
+    border-radius: var(--radius-sm, 6px);
+    transition:
+        background-color var(--speed, 0.18s) var(--ease, ease),
+        color var(--speed, 0.18s) var(--ease, ease);
     cursor: pointer;
 }
 
 .link:hover {
     background: var(--hover-color, #e8e8e8) !important;
-    color: var(--primary-color, #000) !important;
+    /* Was the brand blue, which on hover made an unselected tab look like the
+       selected one. */
+    color: var(--heading-color, #000) !important;
     text-decoration: none;
 }
 
+.link:focus-visible,
+.childLink:focus-visible,
+.parentLink:focus-visible {
+    outline: none;
+    box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 118, 192, 0.32));
+}
+
 .activetab button {
     font-weight: bold;
     background: var(--hover-color, #e0e0e0) !important;
@@ -146,19 +186,20 @@
     display: none;
     align-items: center;
     justify-content: space-between;
-    padding: 12px 15px;
+    padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
     background: var(--primary-color, #000);
-    color: var(--tertiary-color, white);
-    border-radius: 8px;
+    color: #fff;
+    border-radius: var(--radius-sm, 6px);
     cursor: pointer;
-    margin-bottom: 10px;
+    margin-bottom: var(--spacing-sm, 0.5rem);
     border: none;
-    box-shadow: 0 1px 3px rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.2);
+    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.2));
 }
 
 .activeFilterLabel {
-    font-weight: 600;
-    color: var(--tertiary-color, white);
+    font-weight: var(--font-weight-semibold, 600);
+    font-size: var(--font-size-sm, 0.8125rem);
+    color: #fff;
 }
 
 .mobileMenuIcon {
@@ -175,7 +216,7 @@
     display: block;
     height: 2px;
     width: 100%;
-    background-color: var(--tertiary-color, white);
+    background-color: #fff;
     border-radius: 2px;
     transition: all 0.3s ease;
 }
@@ -206,20 +247,17 @@
         display: none; /* Hide hamburger menu on tablets */
     }
 
-    /* Slightly adjust padding for better tablet experience */
-    .parentLink {
-        padding: 9px 16px;
-        font-size: 0.9rem;
-    }
-
+    /* Roomier tap targets. Only the padding moves: the literal 0.85/0.9rem
+       sizes that used to sit here re-declared the rail's type at a scale
+       nothing else on the page uses, so the labels changed size at 1024px for
+       no reason. Density is a padding question. */
+    .parentLink,
     .link {
-        padding: 9px 16px;
-        font-size: 0.85rem;
+        padding: 0.65rem var(--spacing-md, 1rem);
     }
 
     .childLink {
-        padding: 7px 16px 7px 26px;
-        font-size: 0.85rem;
+        padding: 0.65rem var(--spacing-md, 1rem) 0.65rem var(--spacing-xl, 1.75rem);
     }
 }
 
@@ -240,25 +278,21 @@
         display: block;
         max-height: 1000px;
         overflow-y: auto;
-        border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.1);
-        border-radius: 8px;
-        margin-bottom: 10px;
-        box-shadow: 0 2px 5px rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.1);
-    }
-
-    .parentLink {
-        padding: 10px 16px; /* Slightly larger touch targets for mobile */
-        font-size: 0.9rem;
+        padding: var(--spacing-xs, 0.25rem);
+        border: 1px solid var(--border-color, #e1e1e1);
+        border-radius: var(--br, 8px);
+        margin-bottom: var(--spacing-sm, 0.5rem);
+        box-shadow: var(--shadow-sm, 0 2px 5px rgba(0, 0, 0, 0.1));
     }
 
+    /* Larger tap targets on a phone; the type scale is left alone, as above. */
+    .parentLink,
     .link {
-        padding: 10px 16px; /* Slightly larger touch targets for mobile */
-        font-size: 0.85rem;
+        padding: 0.75rem var(--spacing-md, 1rem);
     }
 
     .childLink {
-        padding: 8px 16px 8px 26px;
-        font-size: 0.85rem;
+        padding: 0.75rem var(--spacing-md, 1rem) 0.75rem var(--spacing-xl, 1.75rem);
     }
 
     .collapsibleMenu {