actual-css 0.1.0 → 0.2.0

package/docs/design-notes/widget-primitives.md

@@ -0,0 +1,83 @@
+# Widget primitives
+
+The JS runtime doubles as a primitive kit for building custom widgets.
+
+## Primitives
+
+| Need | Primitive | Import |
+|------|-----------|--------|
+| Opt-in discovery + lifecycle + cleanup | `enhance`, `registerEnhancement` | `actual-css/js/enhance` |
+| Positioning, flip/shift, `--available-height`, `data-placement` | `floating` (`track`, `reposition`, `repositionAt`) | `actual-css/js/floating` |
+| Open/close, sheet on mobile, backdrop, outside-click, Escape, focus restore | `surface` | `actual-css/js/surface` |
+| Roving focus over a list | `keys` (`firstItem`, `lastItem`, `nextItem`) | `actual-css/js/keys` |
+| Menu-item vocabulary, usable-item filtering | `menu` | `actual-css/js/menu` |
+| Focusable lookup, visibility | `focus` | `actual-css/js/focus` |
+| Caret-safe value rewriting | `input` (`onTextInput`, `setCaret`, `dispatchInput`) | `actual-css/js/input` |
+| Character policies | `filter` | `actual-css/js/filter` |
+| Event namespace | `events` (`EVENTS`, `ACTUAL_EVENT_PREFIX`) | `actual-css/js/events` |
+| Declarative triggers | `command` (`registerCommands`) | `actual-css/js/command` |
+| State classes the runtime writes | `selectors` (`CLASSES`) | `actual-css/js/selectors` |
+
+## Compositions
+
+### Custom select — A. Owns its popup
+
+```
+enhance
+floating
+keys
+```
+
+Full control. Everything re-implemented. Use when the widget must own dismissal (e.g.
+an inline autocomplete that should survive an outside click).
+
+### Custom select — B. Reuses the surface lifecycle
+
+```
+enhance
+surface   (Escape, outside click, focus restore, sheet mode)
+floating
+keys
+```
+
+Less code. Inherits the runtime's dismissal semantics and mobile sheet. Use for
+anything that behaves like a popup.
+
+> A `[role="listbox"]` surface with `[role="option"]` children gets no key handling and
+> no click-autoclose from `surface.js` — that is the extension seam. `[role="option"]`
+> is deliberately not in the menu-item vocabulary.
+
+### Tags input
+
+```
+enhance + input + keys + filter (optional character policy)
+```
+
+No floating, no surface.
+
+### Date picker
+
+```
+enhance + surface + floating + keys + events
+```
+
+A calendar popup wants Escape/outside-click/sheet. `actual:surface-open` to veto or
+decorate.
+
+## What "no Actual class" actually promises
+
+> No Actual presentation or component class is required in authored markup for behavior to
+> work. Runtime state classes are still written by the primitives, and remapping them is
+> what `selectors.js` is for.
+
+Concretely: no `.flyout`, `.tabs`, `.field`, `.btn`, `.needs-validation`, `.status-bar`
+anywhere in the author's HTML — while `.is-open` may appear in the author's *CSS*, as a
+state to style or ignore.
+
+## Honest gaps
+
+- No typeahead helper — filter, debounce, render are author concerns.
+- No `aria-activedescendant` helper — the author manages the composite-widget pattern.
+- No virtual-list support.
+- No `<select>` replacement in core — the deliverable is the *surface*, not the widget.
+  `<select data-enhance="select">` is the intended shape for an external package.

package/docs/forms.md

@@ -7,7 +7,7 @@
 - Form controls are styled with explicit classes, not by parent scope.
 - Control classes: `.input`, `.textarea`, `.select`, `.check`, `.radio`, `.switch`, `.range`, `.file`.
 - Reusable layout classes: `.field`, `.field-label`, `.field-help`, `.field-error`, `.field-group`, `.choice`, `.form-actions`, `.form-actions.sticky`.
-- No floating labels.
+- No floating labels shipped — the blocks demo shows a userland recipe for teams that want them.
 - Proper focus style that preserves keyboard navigation.
 - `.field-group` and `.choice` provide layout without depending on parent scope.
 - Customizable select is progressive enhancement only — the native select remains the baseline.
@@ -1085,7 +1085,7 @@ Actual CSS ships validation *styles*. Invalid fields are marked with `aria-inval
 Opt in with the `.needs-validation` class. Importing the module registers the behavior; there is no init call.
 
 ```html
-<form class="needs-validation" data-validation-message="Please check the highlighted fields.">
+<form class="needs-validation" data-enhance="validation" data-validation-message="Please check the highlighted fields.">
   <div class="stack">
     <label class="field">
       <span class="field-label">Password</span>
@@ -1116,7 +1116,7 @@ On blur, the enhancer sets `aria-invalid="true"` on the invalid field so visual
 The status bar (`actual-css/js/status`) auto-wires to that event: import it and add one status element, and the form's `data-validation-message` appears automatically on invalid submit — no manual listener.
 
 ```html
-<form class="needs-validation" data-validation-message="Please check the highlighted fields.">
+<form class="needs-validation" data-enhance="validation" data-validation-message="Please check the highlighted fields.">
   <div class="stack">
     <label class="field">
       <span class="field-label">Email</span>
@@ -1196,7 +1196,7 @@ Add your own with `FormValidator.registerRule(name, (value, el, ...opts) => bool
 The `date` rule pairs naturally with `data-mask` — the mask structures input, the rule validates meaning. Same rule, different formats:
 
 ```html
-<form class="stack needs-validation" novalidate>
+<form class="stack needs-validation" data-enhance="validation" novalidate>
   <label class="field">
     <span class="field-label">Date (ISO)</span>
     <input class="input" name="date-iso"

package/docs/javascript.md

@@ -67,42 +67,85 @@ handle; cleanup is per-element when an element leaves the DOM.
 
 ## Using The Runtime With Another CSS Framework
 
-The JS is designed to be usable on its own, without Actual's stylesheet. Two
-kinds of vocabulary appear in the modules, and only one of them is Actual's:
-
-- **data-\* attributes and ARIA** are each module's own behavior API —
-  `data-mask`, `data-tooltip`, `aria-controls`, and so on. They are
-  framework-neutral by construction and never need remapping. A name specific
-  enough to the module (`data-mask`, `data-tooltip`) is safe to match alone.
-  A generic domain word (`data-status` — order status, task status, …) is
-  not: some unrelated element elsewhere in the app could carry the same
-  attribute for its own reasons, so that selector is paired with a class (see
-  `status.js` below) to scope the document-wide lookup down to the real target.
-- **CSS class names** (`.flyout`, `.tabs`, `is-open`, `has-modal-open`, …) are
-  Actual's own vocabulary. Every module that matches against or writes one of
-  these imports it from `actual-css/js/selectors` instead of hardcoding the
-  string:
+The JS is designed to be usable on its own, without Actual's stylesheet.
+
+- **data-enhance tokens** register root-controller behaviors. The runtime
+  discovers components through `data-enhance="tabs"`, `data-enhance="flyout"`,
+  `data-enhance="scrollspy"`, and `data-enhance="validation"` — no Actual
+  presentation class needed. Self-describing attributes (`data-mask`,
+  `data-tooltip`, `data-context-menu`) stay framework-neutral by construction.
+- **`selectors.js`** lists state classes the runtime *writes* (`is-open`,
+  `was-validated`, `is-sheet`, …). Edit this file (or alias it in a bundler)
+  to match a different CSS framework's state vocabulary. Discovery selectors
+  were removed in 0.2 — the file no longer bridges CSS class names to JS
+  initialization.
+- **One documented exception:** validation reads `.field-error` (or its alias
+  `[data-field-error]`) and the optional `.field` ancestor to connect error
+  slots and toggle danger state. Both are read-side presentation adapters that
+  degrade to no-op under foreign CSS — `aria-invalid`, focus management,
+  custom rules, and server errors all keep working without them.
+- **status.js** uses `[data-status][role="status"]` — semantics, not a class.
+  Its `intent` option applies whatever class names the caller passes, so
+  `.danger`, `.success`, and the rest of intents.css are never hardcoded.
+
+## The Runtime as a Primitive Kit
+
+For building custom widgets (select, tags, date picker) on Actual's primitives,
+see [Widget primitives](design-notes/widget-primitives.md). Every primitive
+subpath is published in `package.json#exports`:
 
-```js
-// src/js/selectors.js
-export const CLASSES = {
-  flyout: "flyout",
-  tabs: "tabs",
-  open: "is-open",
-  // …
-};
 ```
+actual-css/js/enhance    actual-css/js/events    actual-css/js/floating
+actual-css/js/focus      actual-css/js/keys      actual-css/js/menu
+actual-css/js/surface
+```
+
+The exports map is explicit — it *is* the statement of what is public.
+
+## Floating Contract
+
+`floating` is a positioning-only primitive with zero CSS dependency: no
+`classList`, no `selectors.js` import, no Actual class anywhere. It computes and
+exposes `left`/`top`, `data-placement`, `--available-height`,
+`--arrow-x`/`--arrow-y`. The caller owns the floating element's presentation
+entirely.
+
+A third-party widget importing only `floating` with no Actual stylesheet must
+be able to position a listbox under an input — that is the test.
+
+## Surface Contract
+
+`surface` has documented presentation coupling. A foreign consumer must supply
+or account for:
+
+```css
+.my-panel              { position: absolute; z-index: 100; }
+.my-panel[hidden]      { display: none; }
+/* surface.js sets position:fixed + inline left/top on open —
+   do not override with !important */
+/* .is-open / .is-sheet / .surface-backdrop are written by surface.js
+   — style or ignore them */
+/* --flyout-trigger-width is set while an open surface is positioned */
+/* data-actual-surface is written by surface.js for teardown
+   — never select on it */
+```
+
+Two non-obvious requirements:
+1. `[hidden] { display: none }` must not be defeated by a higher-specificity
+   `display` rule — `surface.js` toggles `hidden`, not `display`.
+2. The open state switches to `position: fixed` with measured inline
+   coordinates.
+
+Lifecycle: `prepareSurface` → `openSurface` → `closeSurface` →
+`disconnectSurface`. `openSurface` dispatches a cancelable
+`actual:surface-open` event: widgets can veto or decorate opens, and context
+menus inject their own source/restoreFocusTo through it.
 
-To run this runtime against a different CSS framework, edit that one file (or
-alias it in a bundler) — no other module needs to change. `status.js` is the
-example that draws the line most clearly: its selector requires
-`.status-bar` (from `CLASSES.statusBar`, for the collision-safety reason
-above), but its `intent` option applies whatever class names the caller
-passes straight to the target's class list — `.danger`, `.success`, and the
-rest of Actual's intents.css vocabulary are never referenced by the module
-itself. Each call resets the target to the class list it had the first time
-`status()` ran, then adds the current call's intent classes, so nothing
-accumulates and classes present before JavaScript ever ran are left alone.
+Extension seam: a `[role="listbox"]` surface with `[role="option"]` children
+gets no keyboard handling and no click-autoclose from `surface.js`.
+`[role="option"]` is deliberately not in the menu-item vocabulary — a combobox
+reuses the surface lifecycle while retaining full control of its own keyboard
+and selection.
 
 ## Extending The Runtime
 
@@ -169,6 +212,33 @@ Prefer explicit app attributes such as `data-copy`, `data-autogrow`, or
 `data-ajax`. Actual's built-in attributes are intentionally small contracts; app
 behavior can be richer without overloading them.
 
+### Named behavior registration
+
+Use `registerEnhancement()` when author markup opts in with a `data-enhance`
+token instead of an app-specific attribute. A third-party behavior registers
+exactly like a built-in one:
+
+```js
+import { registerEnhancement } from "actual-css/js/enhance";
+
+registerEnhancement("autosubmit", (form) => {
+  const controller = new AbortController();
+
+  form.addEventListener("change", () => form.requestSubmit(), {
+    signal: controller.signal,
+  });
+
+  return () => controller.abort();
+});
+```
+
+```html
+<form data-enhance="validation autosubmit">
+```
+
+No core module list is modified. The test case in `tests/enhance.test.js`
+(*registers a third-party behavior without touching core*) proves the shape.
+
 ## Lifecycle Rules
 
 - Keep selectors opt-in.
@@ -389,7 +459,7 @@ event with `{ form, firstInvalid, message }`. Valid fields are not marked
 automatically.
 
 ```html
-<form class="needs-validation" data-validation-message="Please check the fields.">
+<form class="needs-validation" data-enhance="validation" data-validation-message="Please check the fields.">
   <input class="input" name="email" type="email" required
          aria-describedby="email-error" />
   <span class="field-error" id="email-error">Enter a valid email.</span>

package/docs/patterns.md

@@ -413,3 +413,92 @@ If list chrome should be removed, use an explicit pattern.
   <li><a href="/components">Components</a></li>
 </ul>
 ```
+
+## Hierarchical scrollable nav
+
+App shell with a collapsible nav tree. Uses existing primitives only — no
+treeview component.
+
+```html
+<aside class="sidebar">
+  <nav class="nav-list scroller" data-enhance="scrollspy" aria-label="Docs">
+    <details open>
+      <summary class="nav-heading">Getting started</summary>
+      <a class="nav-link" href="#intro">Introduction</a>
+      <a class="nav-link" href="#install">Installation</a>
+    </details>
+    <details>
+      <summary class="nav-heading">Components</summary>
+      <a class="nav-link" href="#alert">Alert</a>
+      <a class="nav-link" href="#badge">Badge</a>
+    </details>
+  </nav>
+</aside>
+```
+
+- `.nav-list` + `.nav-link`: Actual's nav chrome
+- Native `<details>`: exclusive accordion with `<details name>` (no JS engine)
+- `data-enhance="scrollspy"`: scroll-driven `aria-current`
+- `.scroller`: thin, theme-aware scrollbar
+- No `.nav-heading` / `.nav-sublist` classes — the existing primitives are enough
+
+## Code block with copy button
+
+```html
+<div class="code-block">
+  <pre><code>npm install actual-css</code></pre>
+  <button class="btn sm ghost" data-copy>Copy</button>
+</div>
+```
+
+```css
+.code-block { position: relative; }
+.code-block > [data-copy] {
+  position: absolute;
+  inset-block-start: var(--space-2);
+  inset-inline-end: var(--space-2);
+}
+```
+
+```js
+import enhance from "actual-css/js/enhance";
+
+enhance({
+  "[data-copy]": (button) => {
+    const controller = new AbortController();
+    button.addEventListener("click", async () => {
+      const code = button.closest(".code-block")?.querySelector("code");
+      if (code) await navigator.clipboard.writeText(code.textContent);
+    }, { signal: controller.signal });
+    return () => controller.abort();
+  },
+});
+```
+
+No core JS, no syntax highlighter — the recipe is the documentation.
+
+## `<details name>` exclusive accordion
+
+Browsers that support the `name` attribute on `<details>` get native exclusive
+accordions — no JS engine needed. Omit `name` to allow several open at once.
+
+```html
+<details name="faq" open>
+  <summary>What is this?</summary>
+  <p>A CSS framework.</p>
+</details>
+<details name="faq">
+  <summary>Does it need JS?</summary>
+  <p>Only the progressive enhancers you import.</p>
+</details>
+```
+
+Not shipping an accordion JS engine is a design decision, not a gap.
+
+## Intent nesting
+
+Intent on an ancestor must not tint nested components, and a local intent inside
+an intent-carrying ancestor must win. Both directions are verified in
+`tests/css-audit.test.js` and the kitchen-sink demo template. Every
+intent-consuming component must declare its `@sync intent-boundary` block —
+that is what prevents inheritance from leaking across components.

package/docs/ui.md

@@ -65,13 +65,7 @@ Use this shape when the dialog interrupts the flow and asks for a decision. It h
     </div>
 
     <footer>
-      <button class="btn outline"
-              type="button"
-              commandfor="delete-dialog"
-              command="request-close"
-              aria-controls="delete-dialog">
-        Cancel
-      </button>
+      <button class="btn outline" value="cancel">Cancel</button>
 
       <button class="btn danger"
               value="delete">
@@ -161,13 +155,7 @@ Use `modal scrollable` when the header and footer should stay visible while the
     </div>
 
     <footer>
-      <button class="btn outline"
-              type="button"
-              commandfor="scroll-dialog"
-              command="request-close"
-              aria-controls="scroll-dialog">
-        Cancel
-      </button>
+      <button class="btn outline" value="cancel">Cancel</button>
 
       <button class="btn primary" value="accept">
         Accept
@@ -227,9 +215,7 @@ Flyouts and tooltips opened from inside a modal dialog are mounted inside the di
       </button>
     </div>
 
-    <menu class="flyout"
-          id="dialog-actions-menu"
-          hidden>
+    <menu class="flyout" data-enhance="flyout" id="dialog-actions-menu" hidden>
       <li><button type="button">Archive</button></li>
       <li><button type="button">Duplicate</button></li>
       <li><button type="button">Share</button></li>
@@ -311,13 +297,7 @@ The effect is progressive: it only runs when the browser supports `document.star
     </header>
 
     <footer>
-      <button class="btn outline"
-              type="button"
-              commandfor="vt-dialog"
-              command="request-close"
-              aria-controls="vt-dialog">
-        Cancel
-      </button>
+      <button class="btn outline" value="cancel">Cancel</button>
       <button class="btn primary" value="confirm">Confirm</button>
     </footer>
   </form>
@@ -478,6 +458,7 @@ Flyout covers two distinct patterns:
   </button>
 
   <menu class="flyout sm"
+        data-enhance="flyout"
         id="account-actions"
         aria-labelledby="account-flyout-trigger"
         hidden>
@@ -501,7 +482,7 @@ Flyout covers two distinct patterns:
         <i class="ti ti-chevron-down" aria-hidden="true"></i>
       </button>
 
-      <div class="flyout"
+      <div class="flyout" data-enhance="flyout"
            id="products-panel"
            aria-label="Products"
            data-flyout-mobile="auto"
@@ -551,6 +532,7 @@ Use `class="flyout grid-3"` when a nav panel needs multiple link groups. Keep li
       </button>
 
       <div class="flyout grid-3"
+           data-enhance="flyout"
            id="product-mega-menu"
            aria-label="Platform"
            data-flyout-mobile="auto"
@@ -628,6 +610,7 @@ Long press is opt-in with `data-context-menu-long-press`. Empty uses the default
   <output id="context-result" class="text-sm text-muted" aria-live="polite">No context selected.</output>
 
   <menu class="flyout"
+        data-enhance="flyout"
         id="file-actions"
         aria-labelledby="file-actions-trigger"
         hidden>
@@ -662,7 +645,7 @@ Long press is opt-in with `data-context-menu-long-press`. Empty uses the default
 
 ```html
 <div class="tabset">
-  <div class="tabs" role="tablist" aria-label="Settings">
+  <div class="tabs" data-enhance="tabs" role="tablist" aria-label="Settings">
     <button class="tab primary"
             type="button"
             role="tab"
@@ -832,12 +815,21 @@ or style `[aria-current]` yourself.
 
 - `.scrollspy` marks the region for JS detection. It does not add visual styles.
 - `.nav-list` and `.nav-link` provide the visible list and active link styling.
-- The JS enhancer uses `IntersectionObserver` to toggle `aria-current="location"`
-  on the active link. Without JavaScript, the links remain regular anchor links.
+- The JS enhancer toggles `aria-current="location"` on the active link. Without
+  JavaScript, the links remain regular anchor links.
+- Detection is geometric and deterministic: on each scroll, the active section is
+  the last one whose top has crossed an activation line. Reaching the end of the
+  scroll always activates the last section, and sitting above the first activates
+  none.
+- `data-scrollspy-root="#container"` measures a scroll container instead of the
+  viewport.
+- `data-scrollspy-offset` moves the activation line: a bare number or `px` value
+  is pixels, a `%` value is a share of the root's visible height. Invalid values
+  fall back to `20%`, and negatives clamp to `0`.
 - The same markup also works with the CSS-native scroll markers path (see below).
 
 ```html
-<nav class="scrollspy" aria-label="Page sections">
+<nav class="scrollspy" data-enhance="scrollspy" aria-label="Page sections">
   <ol class="nav-list stack">
     <li><a class="nav-link" href="#overview" aria-current="location">Overview</a></li>
     <li><a class="nav-link" href="#tokens">Tokens</a></li>
@@ -892,7 +884,7 @@ portable fallback — the same markup serves both paths.
 - Intents: `danger`, `success`, `warning`, `neutral`. The default (no intent) is a neutral dark pill.
 
 ```html
-<form class="needs-validation" data-validation-message="Please check the highlighted fields.">
+<form class="needs-validation" data-enhance="validation" data-validation-message="Please check the highlighted fields.">
   <label class="field">
     <span class="field-label">Email</span>
     <input class="input" type="email" name="email" required

package/llms.txt

@@ -15,3 +15,9 @@ full CSS framework and `actual-css/js` for the complete runtime. The composition
 guides in [README](README.md) and [JavaScript](docs/javascript.md) show supported
 CSS modules and individual enhancer imports without duplicating the full export
 list here.
+
+In 0.2, presentation (`class`) and behavior (`data-enhance`) are separate layers.
+Behaviour primitives (`enhance`, `floating`, `surface`, `keys`, `menu`, `focus`,
+`events`) are independently importable for building custom widgets.
+See [enhancement contract](docs/design-notes/enhancement-contract.md) and
+[widget primitives](docs/design-notes/widget-primitives.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "actual-css",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
   "type": "module",
   "packageManager": "bun@1.3.14",
@@ -8,11 +8,11 @@
   "author": "Thomas <thomas@lekoala.be>",
   "repository": {
     "type": "git",
-    "url": "https://onedev.kalyptus.ovh/actual-css.git"
+    "url": "https://github.com/lekoala/actual-css.git"
   },
-  "homepage": "https://onedev.kalyptus.ovh/actual-css",
+  "homepage": "https://github.com/lekoala/actual-css",
   "bugs": {
-    "url": "https://onedev.kalyptus.ovh/actual-css/issues"
+    "url": "https://github.com/lekoala/actual-css/issues"
   },
   "keywords": [
     "css",
@@ -40,11 +40,15 @@
     "./js/dialog": "./src/js/dialog.js",
     "./js/dialog-fallback": "./src/js/dialog-fallback.js",
     "./js/enhance": "./src/js/enhance.js",
+    "./js/events": "./src/js/events.js",
     "./js/filter": "./src/js/filter.js",
     "./js/floating": "./src/js/floating.js",
     "./js/flyout": "./src/js/flyout.js",
+    "./js/focus": "./src/js/focus.js",
     "./js/input": "./src/js/input.js",
+    "./js/keys": "./src/js/keys.js",
     "./js/mask": "./src/js/mask.js",
+    "./js/menu": "./src/js/menu.js",
     "./js/password": "./src/js/password.js",
     "./js/scrollspy": "./src/js/scrollspy.js",
     "./js/selectors": "./src/js/selectors.js",
@@ -52,6 +56,7 @@
     "./js/tooltip": "./src/js/tooltip.js",
     "./js/validation": "./src/js/validation.js",
     "./js/status": "./src/js/status.js",
+    "./js/surface": "./src/js/surface.js",
     "./package.json": "./package.json"
   },
   "main": "./dist/actual.js",
@@ -83,6 +88,7 @@
     "build:dist": "bun scripts/build-dist.js",
     "build:js": "bun scripts/build-js.js",
     "build:size": "bun scripts/build-size.js",
+    "check:enhance": "bun run scripts/check-enhance.js",
     "check:reserved": "bun scripts/check-reserved.js",
     "check:links": "bun scripts/check-doc-links.js",
     "check:templates": "bun scripts/check-templates.js",
@@ -90,12 +96,12 @@
     "shot:page": "bun scripts/page-shot.js",
     "check:sync": "bun scripts/check-sync.js",
     "test": "bun test",
-    "build:all": "bun run build:demo && bun run build:dist && bun run check:reserved && bun run check:sync && bun run check:links && bun run check:templates && bun run test && bun run build:js && bun run build:size",
+    "build:all": "bun run build:demo && bun run build:dist && bun run check:enhance && bun run check:reserved && bun run check:sync && bun run check:links && bun run check:templates && bun run test && bun run build:js && bun run build:size",
     "prepublishOnly": "bun run build:all"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.0",
-    "happy-dom": "^20.10.6",
-    "prismjs": "^1.30.0"
+    "@biomejs/biome": "^2.5",
+    "happy-dom": "^20.11",
+    "prismjs": "^1.30"
   }
 }

package/src/css/base.css

@@ -17,10 +17,6 @@ a {
   text-underline-offset: 0.18em;
 }
 
-a:focus-visible {
-  box-shadow: var(--focus-ring-shadow);
-}
-
 @media (hover: hover) {
   a:hover {
     text-decoration-thickness: 0.12em;