@wtfalch/design 0.9.0 → 0.9.1

package/dist/components/Select.js

@@ -81,5 +81,5 @@ export default function Select({ block = false, size, className, children, value
     return (_jsxs(AriaSelect, { className: `sel${block ? ' ctl-block' : ''}${className ? ` ${className}` : ''}`, selectedKey: value !== undefined ? String(value) : undefined, defaultSelectedKey: defaultValue !== undefined ? String(defaultValue) : (options[0]?.value ?? undefined), onSelectionChange: (key) => {
             if (key !== null)
                 onChange?.({ target: { value: String(key) } });
-        }, isDisabled: disabled, name: name, form: form, "aria-label": ariaLabel, "aria-labelledby": wiredLabelledBy, children: [_jsxs(Button, { ref: control, id: wiredId, "aria-describedby": ariaDescribedBy ?? field?.['aria-describedby'], className: `sel-control${size ? ` size-${size}` : ''}`, children: [_jsx(SelectValue, { className: "sel-value flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: ({ selectedText, defaultChildren }) => selectedText ?? defaultChildren }), _jsx("svg", { className: "sel-caret flex-none opacity-60", viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m6 9 6 6 6-6" }) })] }), _jsx(Popover, { className: "sel-list z-[60] max-h-[280px] overflow-y-auto m-0 p-1 list-none border border-border-strong rounded-md surface-panel", placement: "bottom start", offset: 4, maxHeight: 280, children: _jsx(ListBox, { children: options.map((o) => (_jsxs(ListBoxItem, { id: o.value, textValue: o.text, isDisabled: o.disabled, className: "sel-item flex items-center gap-2 p-2 rounded-sm cursor-pointer whitespace-nowrap", children: [_jsx("span", { className: "flex-1 min-w-0 overflow-hidden text-ellipsis", children: o.label }), _jsx("svg", { className: "sel-tick flex-none opacity-0", viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", d: "m5 13 4 4 10-10" }) }), aside?.(o.value)] }, o.value))) }) })] }));
+        }, isDisabled: disabled, name: name, form: form, "aria-label": ariaLabel, "aria-labelledby": wiredLabelledBy, children: [_jsxs(Button, { ref: control, id: wiredId, "aria-describedby": ariaDescribedBy ?? field?.['aria-describedby'], className: `sel-control${size ? ` size-${size}` : ''}`, children: [_jsx(SelectValue, { className: "sel-value flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: ({ selectedText, defaultChildren }) => selectedText ?? defaultChildren }), _jsx("svg", { className: "sel-caret flex-none opacity-60", viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", d: "m6 9 6 6 6-6" }) })] }), _jsx(Popover, { className: "sel-list z-[60] max-h-[280px] overflow-y-auto m-0 p-1 list-none border border-border-strong rounded-md surface-panel", placement: "bottom start", offset: 4, maxHeight: 280, children: _jsx(ListBox, { children: options.map((o) => (_jsxs(ListBoxItem, { id: o.value, textValue: o.text, isDisabled: o.disabled, className: "sel-item flex items-center gap-2 p-2 rounded-sm cursor-pointer whitespace-nowrap", children: [_jsx("span", { className: "flex-1 min-w-0 overflow-hidden text-ellipsis", children: o.label }), _jsx("svg", { className: "sel-tick flex-none", viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true", children: _jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", d: "m5 13 4 4 10-10" }) }), aside?.(o.value)] }, o.value))) }) })] }));
 }

package/dist/components/SizeGrid.js

@@ -47,10 +47,14 @@ export default function SizeGrid({ value, max = { cols: 3, rows: 3 }, disabled =
                    cell with no contents, so it says it is a block rather than
                    taking a control's arrangement -- is here. */
                 className: [
-                    'size-cell block w-[18px] h-[14px] p-0 rounded-sm border border-border surface-panel-2 cursor-pointer',
+                    /* Geometry here; colour in `sizegrid.css`. The cell's resting border and
+                     surface are the thing `on` and `chosen` override, and a utility
+                     beats a component rule once the sheets are layered -- so stated
+                     here they would win permanently and no cell would ever light up. */
+                    'size-cell block w-[18px] h-[14px] p-0 rounded-sm cursor-pointer',
                     'disabled:cursor-default disabled:opacity-50',
                     on ? 'on' : '',
-                    chosen && !hover ? 'border-accent' : '',
+                    chosen && !hover ? 'chosen' : '',
                 ]
                     .filter(Boolean)
                     .join(' '), disabled: disabled, "aria-label": `${col} by ${row}`, onMouseEnter: () => !disabled && setHover({ cols: col, rows: row }), onFocus: () => !disabled && setHover({ cols: col, rows: row }), onClick: () => onChange({ cols: col, rows: row }) }, `${col}x${row}`));

package/dist/styles/index.css

@@ -17,12 +17,9 @@
     --font-sans: var(--font-sans);
     --font-mono: var(--font-mono);
     --text-xs: var(--text-xs);
-    --text-xs--line-height: inherit;
     --text-sm: var(--text-sm);
-    --text-sm--line-height: inherit;
     --text-base: var(--text-base);
     --text-lg: var(--text-lg);
-    --text-lg--line-height: inherit;
     --text-xl: var(--text-xl);
     --font-weight-normal: var(--weight);
     --tracking-normal: var(--tracking);
@@ -37,14 +34,12 @@
     --spacing-5: var(--space-5);
     --spacing-6: var(--space-6);
     --spacing-10: var(--space-10);
-    --text-2xs--line-height: inherit;
     --text-2xs: var(--text-2xs);
     --text-md: var(--text-md);
     --font-weight-strong: var(--weight-strong);
     --radius-pill: var(--radius-pill);
     --color-text: var(--text);
     --color-muted: var(--muted);
-    --color-accent: var(--accent);
     --color-border: var(--border);
     --color-border-strong: var(--border-strong);
   }
@@ -300,9 +295,6 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-accent {
-    border-color: var(--color-accent);
-  }
   .border-border {
     border-color: var(--color-border);
   }
@@ -353,19 +345,15 @@
   }
   .text-2xs {
     font-size: var(--text-2xs);
-    line-height: var(--tw-leading, var(--text-2xs--line-height));
   }
   .text-lg {
     font-size: var(--text-lg);
-    line-height: var(--tw-leading, var(--text-lg--line-height));
   }
   .text-sm {
     font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
   }
   .text-xs {
     font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
   }
   .leading-\[0\] {
     --tw-leading: 0;
@@ -420,9 +408,6 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-  .opacity-0 {
-    opacity: 0%;
-  }
   .opacity-60 {
     opacity: 60%;
   }
@@ -465,9 +450,6 @@
   .surface-panel {
     background: var(--panel);
   }
-  .surface-panel-2 {
-    background: var(--panel-2);
-  }
   .disabled\:cursor-default:disabled {
     cursor: default;
   }
@@ -707,7 +689,19 @@
   }
 }
 
-/* ---- ./base.css ---- */
+/* ---- ./_system-light.css ---- */
+/* The `system` theme's light half.
+ *
+ * Its own file, and outside the components layer, because it is a *theme*
+ * rather than a component rule. `tokens.css` states the dark base on `:root`
+ * and is unlayered; the moment this sat inside `@layer components` it lost to
+ * that, and every `system` specimen rendered dark on a light-mode machine.
+ * Unlayered beats layered whatever the selector says, which is exactly the
+ * trap this repository keeps finding in different costumes.
+ *
+ * The underscore marks it the same way `_tailwind.built.css` is marked:
+ * `copy-css.mjs` passes both through without wrapping them.
+ */
 /* Light, only under the `system` theme. This used to override `:root`
    unconditionally, so choosing a dark theme on a light-mode laptop got
    silently repainted. Every other theme states its own palette. */
@@ -736,6 +730,8 @@
     }
 }
 
+/* ---- ./base.css ---- */
+@layer components {
 /* Derived from the two surfaces every theme already defines, so a theme gets a
    control colour without knowing this exists. */
 /* Pseudo-elements too. `*` does not match them, and `box-sizing` is not
@@ -1596,8 +1592,10 @@ input:active, textarea:active, select:active { transform: none; }
   color: var(--muted);
   opacity: 1;
 }
+}
 
 /* ---- ./select.css ---- */
+@layer components {
 /* How big a control is, asked for rather than inherited.
    Four sizes existed and every one of them came from a descendant selector:
    `.set-row button` was 11px in 3px of padding, `.approval-actions button` was
@@ -1692,16 +1690,19 @@ input:active, textarea:active, select:active { transform: none; }
 /* State is read off React Aria's attributes: `data-open` on the root,
    `data-focused` / `data-selected` / `data-disabled` on an item, where
    `.open`, `[data-active]`, `.on` and `.off` used to be. */
-.sel-list { scroll-padding-block: var(--space-1); box-shadow: var(--shadow-2); })` brings up ended flush against the
-     border and read as clipped rather than as one of a set -- and this list
-     opens scrolled to whatever is chosen, so that was the ordinary state.
-     `scroll-padding` insets what counts as "in view", so it stops short by
-     the same four the sides have. */
+/* The list keeps two things the utilities on `Select` cannot say.
+ *
+ * `scroll-padding-block`: the same room while the list is scrolled as it has
+ * at rest. Padding at the top of a scroll container scrolls away with the
+ * content, so the row `scrollIntoView({block: 'nearest'})` brings up ended
+ * flush against the border and read as clipped rather than as one of a set --
+ * and this list opens scrolled to whatever is chosen, so that was the
+ * ordinary state.
+ *
+ * `box-shadow`: `--shadow-2` is a token, and a utility would have to inline
+ * the value, which is the one thing the vocabulary exists to stop. */
+.sel-list {
   scroll-padding-block: var(--space-1);
-  list-style: none;
-  border: var(--border-width) solid var(--border-strong);
-  border-radius: var(--radius-md);
-  background: var(--panel);
   box-shadow: var(--shadow-2);
 }
 
@@ -1716,6 +1717,19 @@ input:active, textarea:active, select:active { transform: none; }
 
 /* The tick marks the chosen row. Colour alone would not: a list where the only
    difference is a hue is a list you cannot read past. */
+/* The tick's resting state lives here, beside the state that overrides it.
+ *
+ * It was `opacity-0` on the element and `opacity: 1` here, which worked only
+ * while this sheet was unlayered. A utility is in `@layer utilities` and
+ * beats `@layer components` whatever the selector, so the moment the sheets
+ * moved into a layer the tick stopped appearing on the selected row -- the
+ * resting state won permanently.
+ *
+ * The rule generalises: a utility for a resting state whose active state is a
+ * relationship between elements will always beat that active state. The pair
+ * has to sit in the same layer. */
+.sel-tick { opacity: 0; }
+
 .sel-item[data-selected] .sel-tick { opacity: 1; }
 
 /* The icon on a speaker's row in the open list -- `Select`'s `aside`. Last in
@@ -1750,8 +1764,10 @@ input:active, textarea:active, select:active { transform: none; }
 .field > input,
 .field > textarea,
 .field > .sel { width: 100%; }
+}
 
 /* ---- ./dangerzone.css ---- */
+@layer components {
 /* Destructive, and legible as such standing still. */
 .btn.danger {
   color: var(--bad);
@@ -1863,8 +1879,10 @@ input:active, textarea:active, select:active { transform: none; }
    controls in the same column at the same indent that do not line up read as
    an accident rather than as a pair. */
 .field-row > button { min-width: 9ch; }
+}
 
 /* ---- ./callout.css ---- */
+@layer components {
 /* One shape for everything that tells you something.
    `.banner` and `.callout` were the same box drawn twice: a bordered, rounded,
    12px panel with a tint. They differed in padding by a pixel in each direction
@@ -2003,8 +2021,10 @@ input:active, textarea:active, select:active { transform: none; }
 }
 
 .callout button { flex: none; }
+}
 
 /* ---- ./card.css ---- */
+@layer components {
 /* `.card` is public API, not this component's private styling.
  *
  * Consumers apply it to their own markup -- the gallery's skeleton specimen
@@ -2146,8 +2166,10 @@ input:active, textarea:active, select:active { transform: none; }
 }
 
 .card[aria-pressed='true']:hover { border-color: var(--accent); }
+}
 
 /* ---- ./toggle.css ---- */
+@layer components {
 .card-action .switch-row { padding: 0; gap: var(--space-2); }
 
 .card-action .switch-row .switch-body { flex: none; }
@@ -2378,8 +2400,10 @@ input[type='radio']:active:not(:disabled) {
 @media (prefers-reduced-motion: reduce) {
   .toggle-sweep::before { animation: none; background: color-mix(in oklab, var(--accent) 45%, transparent); }
 }
+}
 
 /* ---- ./skeleton.css ---- */
+@layer components {
 .muted { color: var(--muted); }
 
 .pulse-block {
@@ -2434,8 +2458,10 @@ input[type='radio']:active:not(:disabled) {
   /* Still distinguishable from a real block of colour, and still still. */
   .skel-pulse { animation: none; opacity: 0.8; }
 }
+}
 
 /* ---- ./rows.css ---- */
+@layer components {
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* A name and the pills that qualify it, on one line, where the name is the only
@@ -2696,8 +2722,10 @@ input[type='radio']:active:not(:disabled) {
 .row-hit:hover .truncate { color: var(--accent); }
 
 .row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+}
 
 /* ---- ./progress.css ---- */
+@layer components {
 /* progress ----------------------------------------------------------- */
 
 /* The bar itself: a track with a child it fills, an animation and a
@@ -2739,8 +2767,10 @@ input[type='radio']:active:not(:disabled) {
   /* Still distinguishable from empty, and from full. */
   .bar-indeterminate > i { animation: none; width: 100%; opacity: 0.35; }
 }
+}
 
 /* ---- ./tabs.css ---- */
+@layer components {
 /* ---------------------------------------------------------------- tabs */
 .tabs { position: relative; display: flex; gap: var(--space-1); }
 
@@ -2841,8 +2871,10 @@ input[type='radio']:active:not(:disabled) {
 }
 
 .tabs-vertical .tab:active:not(:disabled) { border-color: transparent; }
+}
 
 /* ---- ./toast.css ---- */
+@layer components {
 /* ---------------------------------------------------------------- toasts */
 .toasts {
   position: fixed;
@@ -2940,8 +2972,10 @@ input[type='radio']:active:not(:disabled) {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
+}
 
 /* ---- ./modal.css ---- */
+@layer components {
 /* modal --------------------------------------------------------------- */
 
 /* `hidden` needs saying out loud here. The browser's own `[hidden]` rule is a
@@ -3172,8 +3206,10 @@ input[type='radio']:active:not(:disabled) {
   .modal.sheet[data-entering],
   .modal.sheet[data-exiting] { animation: none; }
 }
+}
 
 /* ---- ./slider.css ---- */
+@layer components {
 /* slider ----------------------------------------------------------------- */
 /* A number from a range -- `Slider.tsx` says when one is the right control.
    The row is laid out like a switch row: words on the left, the control on the
@@ -3395,8 +3431,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
    the scale, and the two line up; an explicit `size-*` still wins. */
 :where(.set-row) button,
 :where(.set-row) .slider-box { font-size: var(--text-xs); }
+}
 
 /* ---- ./checkbox.css ---- */
+@layer components {
 /* A row you choose. There is no checkbox in it.
    Every one of the fourteen in this app sits beside a name and a line of
    explanation, so the row was always the thing being designed and the 17px
@@ -3566,8 +3604,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .choice[data-disabled] .choice-why { opacity: 0.5; }
 
 .choice[data-disabled]::after { opacity: 0.4; }
+}
 
 /* ---- ./table.css ---- */
+@layer components {
 /* A second line under a row's name, inside the `<th scope="row">` that makes it
    one. The cell is bold because it is a heading; what hangs under it is not,
    and inherited the weight -- so a pinned version read as loud as the thing it
@@ -3615,27 +3655,48 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
 
 .data-table thead th[style*='right'] { text-align: right; }
+}
 
 /* ---- ./sizegrid.css ---- */
-/* What is left of the size grid once it draws itself.
+@layer components {
+/* The cell's colour, all of it, in one place.
+ *
+ * `SizeGrid` draws the cell's geometry with utilities and leaves every colour
+ * here, because `on` and `chosen` override the resting state -- and a utility
+ * is in `@layer utilities`, which beats `@layer components` whatever the
+ * selector. Stated as `surface-panel-2` and `border-border` on the element,
+ * the resting state won permanently and no cell ever lit up.
  *
- * `on` follows the pointer; `chosen` is what is actually saved, shown only
- * when nothing is hovered so the two can never contradict each other.
- * `chosen` is a border colour and says so at the call site; `on` is a fill
- * mixed from the accent, and `color-mix` in an arbitrary value is less
- * readable than the rule it replaces. */
+ * That is the third time this pattern has bitten: `Select`'s tick and
+ * `Empty`'s figure were the other two. The rule: a resting state whose
+ * active state is a CSS rule has to be a CSS rule too. */
+.size-cell {
+  border: var(--border-width) solid var(--border);
+  background: var(--panel-2);
+}
+
+/* `on` follows the pointer; `chosen` is what is actually saved, shown only
+   when nothing is hovered so the two can never contradict each other. */
 .size-cell.on {
   border-color: var(--accent);
   background: color-mix(in srgb, var(--accent) 45%, transparent);
 }
 
+.size-cell.chosen { border-color: var(--accent); }
+}
+
 /* ---- ./tooltip.css ---- */
+@layer components {
 /* A callout: something worth knowing, with nothing to answer. Distinct from a
    `?`, which is an offer to read more, and from a banner, which is a problem.
    The mark is a round `i` rather than an emoji so it takes the theme's colours
    and stays the same size as the text beside it. */
-/* An info-toned `.callout`, spelled the old way. Identical to it now rather than
-   nearly identical to it, which is the whole point of the consolidation: the
+/* An info-toned `.callout`, spelled the old way. Identical to it now rather
+   than nearly identical to it, which is the whole point of the consolidation.
+   (This comment has been unterminated since before the Tailwind branch -- it
+   stops mid-sentence and never closes, so the CSS parser merged it with the
+   one below and recovered. Nothing was lost from the stylesheet; the rest of
+   the sentence was. Closed here rather than guessed at.) */
 
 /* What is left once `Tooltip` draws its own mark: the hover and focus that
    reach the mark from its parent, and the tip -- whose closed and open
@@ -3718,8 +3779,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 }
 
 .explain-tip strong { color: var(--text); font-weight: 600; }
+}
 
 /* ---- ./illustration.css ---- */
+@layer components {
 /* illustrations -------------------------------------------------------- */
 
 /* Open Peeps, two colours, wearing whatever the theme is.
@@ -3757,8 +3820,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
  * original rule already carried a note about needing two classes to beat
  * `.illo`; layers make that impossible rather than merely fiddly. */
 .nothing-figure { color: var(--muted); }
+}
 
 /* ---- ./field.css ---- */
+@layer components {
 /* fields --------------------------------------------------------------- */
 
 /* Label, description, input, error -- in the order they are wanted. The
@@ -3933,8 +3998,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
   background: var(--panel-2);
   color: var(--text);
 }
+}
 
 /* ---- ./tour.css ---- */
+@layer components {
 /* tour ----------------------------------------------------------------- */
 
 /* The layer sits over everything and catches nothing: the scrim is painted by
@@ -3996,12 +4063,14 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .tour-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
 
 .tour-count { color: var(--muted); font-size: var(--text-xs); }
+}
 
 /* The mail and forum shell, added in 0.4.0. After the rest, because the
    anchored surfaces (`.pop`, `.menu-sheet`, `.cmd`) sit over everything and a
    rule of equal specificity that came earlier would lose to whatever the
    sheets they cover happen to set. */
 /* ---- ./stat.css ---- */
+@layer components {
 /* What the utilities on `Stat` cannot say: a tone on the tile colouring the
    figure inside it. An attribute on the parent selecting a child is a
    relationship; a utility is a property on one element.
@@ -4012,8 +4081,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 .stat[data-tone='good'] .stat-value { color: var(--good); }
 .stat[data-tone='warn'] .stat-value { color: var(--warn); }
 .stat[data-tone='bad'] .stat-value { color: var(--bad); }
+}
 
 /* ---- ./shell.css ---- */
+@layer components {
 /* The measure, and only the measure.
  *
  * `Shell` draws itself with utilities -- it is layout and nothing else. What
@@ -4040,8 +4111,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
   font-size: var(--text-sm);
   white-space: nowrap;
 }
+}
 
 /* ---- ./scrollarea.css ---- */
+@layer components {
 /* A box that scrolls, with its edges drawn.
    
    The fades are `::before`/`::after` on the scroller itself, pinned with
@@ -4134,8 +4207,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
   .scroller.faded::before,
   .scroller.faded::after { transition: none; }
 }
+}
 
 /* ---- ./splitpane.css ---- */
+@layer components {
 /* Two panes and the handle between them. */
 .split {
   display: flex;
@@ -4235,8 +4310,10 @@ body.splitting * { cursor: inherit !important; }
 @media (prefers-reduced-motion: reduce) {
   .split-grip { transition: none; }
 }
+}
 
 /* ---- ./popover.css ---- */
+@layer components {
 /* A small surface anchored to what opened it. Same sheet as the select's list,
    because they are the same object -- something that appeared over the page,
    attached to a control. */
@@ -4290,8 +4367,10 @@ body.splitting * { cursor: inherit !important; }
   .pop[data-entering],
   .pop[data-exiting] { animation: none; }
 }
+}
 
 /* ---- ./menu.css ---- */
+@layer components {
 /* What is left once `Menu` draws its sheet and its list: the rows, whose
    `data-focused`, `data-pressed` and danger states React Aria stamps on
    them, and the rules that reach from a row into what it holds. The
@@ -4373,8 +4452,10 @@ body.splitting * { cursor: inherit !important; }
 }
 
 .menu-sheet { box-shadow: var(--shadow-2); }
+}
 
 /* ---- ./command.css ---- */
+@layer components {
 /* The command palette: a field over the app and a list under it. */
 .cmd-scrim {
   position: fixed;
@@ -4516,8 +4597,10 @@ body.splitting * { cursor: inherit !important; }
   .cmd-scrim[data-exiting],
   .cmd[data-entering] { animation: none; }
 }
+}
 
 /* ---- ./pagination.css ---- */
+@layer components {
 /* What is left once `Pagination` draws its own frame: the step and page
    buttons, whose hover, focus-visible and current states are pseudo-classes
    on two selectors at once, and `.pager-count strong`, which reaches into
@@ -4636,8 +4719,10 @@ body.splitting * { cursor: inherit !important; }
   .pager-page,
   .pager-jump { transition: none; }
 }
+}
 
 /* ---- ./identity.css ---- */
+@layer components {
 /* A person, said in one line: initials, name, sometimes the address. */
 .ident {
   display: inline-flex;
@@ -4738,4 +4823,5 @@ body.splitting * { cursor: inherit !important; }
 
 .ident-remove:hover { background: var(--panel); color: var(--text); }
 .ident-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+}