@visns-studio/visns-components 6.3.3 → 6.3.5

package/package.json

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

package/src/components/Field.jsx

@@ -2182,6 +2182,11 @@ function Field({
                         isEditable={settings.isEditable ?? false}
                         creatableConfig={settings.creatableConfig || {}}
                         editableConfig={settings.editableConfig || {}}
+                        // The checkbox renderer previously ignored the field's
+                        // read-only state, leaving `readOnlyWhen` configs
+                        // claiming a lock the UI didn't enforce — the same gap
+                        // the radio renderers had.
+                        disabled={isFieldReadOnly}
                         style={style}
                     />
                 );
@@ -2306,6 +2311,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 +2346,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

@@ -91,6 +91,56 @@ const evaluateDisableWhen = (rule, data) => {
     }
 };
 
+/**
+ * Field visibility rules (`show`).
+ *
+ * A field carries `show: [{ id: '<other field id>', <condition> }]`, meaning
+ * "when MY value satisfies this condition, reveal the named field; otherwise
+ * hide it". With `self: true` the roles swap: the condition is read from the
+ * NAMED field's value and applied to the field carrying the rule.
+ *
+ * Supported conditions:
+ *
+ *   { value: [...] }    the value equals one of the listed literals. What
+ *                       toggles ({ value: [true] }) and radios
+ *                       ({ value: [1, 2] }) use.
+ *
+ *   { minSelected: n }  the value is an array holding at least n entries.
+ *                       For the multi-* types (multi-checkbox-ajax,
+ *                       multi-dropdown-ajax, …) whose value is a list of
+ *                       selected options — e.g. reveal a pair of per-item
+ *                       quantity inputs only once two boxes are ticked.
+ *
+ * Rules are evaluated when the record loads (the effect keyed on
+ * `fetchTrigger`) and again on every change to the field that carries them,
+ * so a revealed field cannot linger after the value that revealed it goes
+ * away. See also `required_rely` (required-ness that follows another field's
+ * value) and `sumEquals` (a group of numbers that must total a target).
+ */
+const hasShowCondition = (condition) =>
+    !!condition &&
+    (condition.minSelected !== undefined ||
+        (Array.isArray(condition.value) && condition.value.length > 0));
+
+const matchesShowCondition = (condition, value) => {
+    if (!condition) {
+        return false;
+    }
+
+    if (condition.minSelected !== undefined) {
+        return (
+            Array.isArray(value) &&
+            value.length >= Number(condition.minSelected)
+        );
+    }
+
+    if (Array.isArray(condition.value)) {
+        return condition.value.includes(value);
+    }
+
+    return false;
+};
+
 function Form({
     ajaxSetting,
     api,
@@ -115,6 +165,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
@@ -459,18 +515,71 @@ function Form({
             });
         };
 
+        /**
+         * Re-evaluate this field's `show` rules against the value it has just
+         * been given. The other two change handlers do this from the DOM
+         * node's `data-show`, which a select / multi-checkbox never emits, so
+         * without this a rule on one of those types would only ever run at
+         * load time — the reveal would not follow the user's clicks.
+         */
+        const applyShowConditions = (newValue) => {
+            const sourceField = formSettings.fields.find((f) => f.id === id);
+            const conditions = sourceField?.show || [];
+
+            if (conditions.length === 0) {
+                return;
+            }
+
+            const _fields = [...formSettings.fields];
+            let changed = false;
+
+            conditions.forEach((showObject) => {
+                if (!showObject?.id || !hasShowCondition(showObject)) {
+                    return;
+                }
+
+                const targetIndex = _fields.findIndex(
+                    (f) => f.id === showObject.id
+                );
+
+                if (targetIndex < 0) {
+                    return;
+                }
+
+                const shouldShow = matchesShowCondition(showObject, newValue);
+                const target = showObject.self
+                    ? _fields.find((f) => f.id === id)
+                    : _fields[targetIndex];
+
+                if (target) {
+                    target.hide = !shouldShow;
+                    changed = true;
+                }
+            });
+
+            if (changed && updateForm) {
+                updateForm((prevState) => ({
+                    ...prevState,
+                    fields: _fields,
+                }));
+            }
+        };
+
         // // Switch cases to handle different actions
         switch (action.action) {
             case 'select-option':
             case 'create-option': // New case to handle create-option
             case 'deselect-option': // Handle unchecking tags
                 handleSelectOption();
+                applyShowConditions(inputValue);
                 break;
             case 'clear':
                 updateFormData({ [id]: '' });
+                applyShowConditions([]);
                 break;
             case 'remove-value':
                 updateFormData({ [id]: inputValue });
+                applyShowConditions(inputValue);
                 break;
         }
     };
@@ -1297,6 +1406,83 @@ function Form({
                                 _inputClass[item.id] = styles.inputError;
                             }
                         }
+
+                        /**
+                         * `sumEquals`: a set of numeric fields that must add
+                         * up to a target.
+                         *
+                         *   sumEquals: {
+                         *       fields: ['qty_a', 'qty_b'],
+                         *       equals: 'qty_total',   // field id, or a number
+                         *       message: '…'           // optional override
+                         *   }
+                         *
+                         * Declared once, on any one of the fields in the
+                         * group. Every named field is marked in error so the
+                         * user sees which inputs to reconcile, not just a
+                         * message.
+                         *
+                         * The rule is skipped while its own field is hidden,
+                         * so a group that only appears in a revealed section
+                         * (see the `show` documentation above) cannot block an
+                         * ordinary save. While visible it also stands in for
+                         * `required` on the whole group: a blank member is as
+                         * wrong as a wrong total.
+                         */
+                        if (item.sumEquals && item.hide !== true) {
+                            const rule = item.sumEquals;
+                            const groupIds = Array.isArray(rule.fields)
+                                ? rule.fields
+                                : [];
+
+                            if (groupIds.length > 0) {
+                                const labelFor = (fieldId) =>
+                                    fields.find((f) => f.id === fieldId)
+                                        ?.label || fieldId;
+                                const groupLabels = groupIds
+                                    .map(labelFor)
+                                    .join(' and ');
+                                const groupValues = groupIds.map(
+                                    (fieldId) => formData[fieldId]
+                                );
+                                const incomplete = groupValues.some(
+                                    (v) =>
+                                        v === null ||
+                                        v === undefined ||
+                                        v === '' ||
+                                        isNaN(Number(v))
+                                );
+
+                                const target =
+                                    typeof rule.equals === 'number'
+                                        ? rule.equals
+                                        : Number(formData[rule.equals]);
+
+                                const markGroup = () =>
+                                    groupIds.forEach((fieldId) => {
+                                        _inputClass[fieldId] =
+                                            styles.inputError;
+                                    });
+
+                                if (incomplete) {
+                                    validation += `${groupLabels} are required.<br/>`;
+                                    markGroup();
+                                } else if (!isNaN(target)) {
+                                    const sum = groupValues.reduce(
+                                        (total, v) => total + Number(v),
+                                        0
+                                    );
+
+                                    if (sum !== target) {
+                                        validation +=
+                                            (rule.message ||
+                                                `${groupLabels} must add up to ${target} - they add up to ${sum}.`) +
+                                            '<br/>';
+                                        markGroup();
+                                    }
+                                }
+                            }
+                        }
                     });
 
                     setInputClass(_inputClass);
@@ -2091,6 +2277,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
@@ -2665,9 +2856,9 @@ function Form({
             const showConditions = field.show || [];
 
             showConditions.forEach((showObject) => {
-                const { id, value, self } = showObject;
+                const { id, self } = showObject;
 
-                if (id != '' && value.length > 0) {
+                if (id != '' && hasShowCondition(showObject)) {
                     const targetField = formSettings.fields.find(
                         (f) => f.id === id
                     );
@@ -2684,7 +2875,10 @@ function Form({
                             valueChecker !== undefined &&
                             valueChecker !== null
                         ) {
-                            const shouldShow = value.includes(valueChecker);
+                            const shouldShow = matchesShowCondition(
+                                showObject,
+                                valueChecker
+                            );
 
                             if (self) {
                                 field.hide = !shouldShow;
@@ -3300,6 +3494,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/MultiCheckbox.jsx

@@ -16,6 +16,11 @@ function MultiCheckbox({
     isEditable = false,
     creatableConfig = {},
     editableConfig = {},
+    // The checkbox renderer used to ignore the field's read-only state, so a
+    // `readOnlyWhen` config claimed a lock the UI never enforced (the same
+    // gap the radio renderers had). Disabling the boxes also takes the
+    // create/edit affordances away — they mutate the option list.
+    disabled = false,
 }) {
     const [checkboxOptions, setCheckboxOptions] = useState([]);
     const [selectedValues, setSelectedValues] = useState([]);
@@ -75,8 +80,12 @@ function MultiCheckbox({
     const filteredOptions = checkboxOptions;
 
     const handleCheckboxChange = (option, isChecked) => {
+        if (disabled) {
+            return;
+        }
+
         let newSelected;
-        
+
         if (isChecked) {
             // Add to selection
             newSelected = [...selectedValues, option];
@@ -186,7 +195,7 @@ function MultiCheckbox({
         <div className={`${styles.multiCheckbox} ${className || ''}`} style={style}>
 
             {/* Create new tag section */}
-            {isCreatable && (
+            {isCreatable && !disabled && (
                 <div className={styles.createSection}>
                     {!isCreating ? (
                         <button
@@ -294,9 +303,10 @@ function MultiCheckbox({
                                     checked={isSelected(option.id)}
                                     onChange={(e) => handleCheckboxChange(option, e.target.checked)}
                                     className={styles.checkbox}
+                                    disabled={disabled}
                                 />
                                 <span className={styles.labelText}>{option.label}</span>
-                                {isEditable && (
+                                {isEditable && !disabled && (
                                     <button
                                         type="button"
                                         onClick={(e) => {

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/Form.module.scss

@@ -335,43 +335,54 @@ input[type='file'] {
 
 
 
+/* The form's primary action (Save / View Report / Refresh).
+
+   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 {
-    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;
-
-    &:hover {
-        color: var(--primary-color);
-        background: var(--highlight-color);
-        border: 1px solid rgba(var(--highlight-rgb), 1.05);
-    }
+    @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 */
@@ -421,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/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 {