actual-css 0.1.0

package/docs/design-notes/accessibility-decisions.md

@@ -0,0 +1,32 @@
+# Accessibility decisions
+
+## Guarantees
+
+Actual CSS makes the accessible path the default where CSS and small runtime enhancers can help.
+
+- Visible `:focus-visible` styles on interactive components.
+- Native elements first: `button`, `a`, `details`, `dialog`, form controls.
+- Reduced motion support through shared duration tokens and the reset.
+- Forced-colors support on controls and visual state indicators.
+- DOM tests for enhancer lifecycle, focus, attributes, and keyboard behavior.
+
+## Author Responsibilities
+
+- Name icon-only buttons.
+- Use the ARIA attributes shown in examples.
+- Keep form errors inline and connected with `aria-describedby`.
+- Do not put critical information only in a transient notification.
+
+## Interactive states
+
+- Interactive controls must be identifiable at rest, either by their own styling or by clear surrounding context.
+- Interactive states are: rest, hover, active / pressed, focus-visible, disabled, selected / current / expanded (when applicable).
+- Do not rely on hover alone to reveal interactivity.
+- Do not use color alone to communicate state.
+- Use structure, border, background, iconography, and spacing consistently.
+- Select controls stay quieter than text inputs: hover uses a subtle surface change, while focus-visible and open states use a soft ring in normal color modes.
+- Forced-colors keeps strong outlines for select focus/open states, high-contrast option hover/focus states, and a selected checkmark that inherits the option text color unless the option is highlighted.
+- Global Escape handlers only prevent default when Actual has a visible managed surface to close.
+- Prefer explicit `data-filter` values in examples and docs. Empty `data-filter`
+  does not infer behavior from `inputmode`: keyboard hints and destructive value
+  filtering remain separate contracts.

package/docs/design-notes/browser-support.md

@@ -0,0 +1,93 @@
+# Browser support strategy
+
+## Philosophy
+
+Works everywhere, works best on modern browsers. Wide browser support (even older browsers, not IE 11).
+
+- No compile or build step (just CSS).
+- No post-processing — use only necessary browser-specific prefixes and engine hooks.
+- CSS nesting is not used — code must be findable in the inspector. Rules are organized as if nesting were used, grouped together without nesting syntax. Exception: see [CSS nesting inside @supports](#css-nesting-inside-supports).
+
+## Baseline
+
+| Feature area     | Baseline    | Progressive enhancement       |
+|------------------|-------------|-------------------------------|
+| Layout (flex, grid, position) | Baseline 2023 | —                  |
+| CSS custom properties         | Baseline 2023 | —                  |
+| `:has()`                      | Baseline 2023 | —                  |
+| `<dialog>` element            | Baseline 2023 | Below that: rudimentary shim (`dialog-fallback.js` + `dialog-fallback.css`, both standalone and omittable in custom builds), no top layer or focus trap |
+| `color-mix()`                 | Baseline 2023 | Fallback flat color |
+| `light-dark()`                | 2024+        | Manual theme override |
+| `:user-invalid`               | 2024+        | `[aria-invalid]` attribute |
+| `transition-behavior: allow-discrete` | 2024+ | Native dialog open/close |
+| `appearance: base-select`     | 2024+        | Native `<select>` |
+| `@starting-style`             | 2024+        | Instant appearance |
+| View Transition API           | 2024+        | Dialog open/close transition |
+| CSS Anchor Positioning        | Future       | JS positioning (`floating.js`) |
+
+Core layout and visual tokens work on all Baseline 2023 browsers. Features marked
+2024+ are gated with `@supports` or degrade gracefully through fallback values.
+
+## Dark mode
+
+Dark mode is for modern browsers only (light mode is the fallback otherwise).
+Use `color-scheme: light dark` plus `light-dark()` for theme tokens so the
+default theme follows the OS without `data-theme`. Explicit themes pin
+`color-scheme` to light or dark.
+
+## Progressive enhancement
+
+Modern features are gated with `@supports`; unsupported browsers keep the core layout and controls.
+
+- `color-mix(in oklch, ...)` — enhanced variant surfaces and hover states
+- `appearance: base-select` — enhanced select picker on fine-pointer devices
+- `backdrop-filter` — enhanced sticky form actions
+- `transition-behavior: allow-discrete` — smooth dialog open/close
+- `:has()` — button groups, alert icons, disabled choice labels
+
+### @supports usage
+
+Use `@supports` positively (no `@supports not`) only when it protects a dependent group of rules or a real fallback/modern branch. Do not gate a single progressive declaration whose unsupported value is simply ignored by the browser, such as `text-wrap: balance`.
+
+When a baseline declaration is already a valid fallback, prefer the normal cascade to an `@supports` wrapper. For example, older browsers keep the opaque surface here, while newer ones replace it with the translucent value:
+
+```css
+background: var(--surface);
+background: color-mix(in oklch, var(--surface) 88%, transparent);
+backdrop-filter: blur(1rem);
+```
+
+### CSS nesting inside @supports
+
+The no-nesting rule protects browsers that predate CSS nesting (Chrome 112, Firefox 117, Safari 16.5). A block already gated behind a later feature can't be reached by any browser that lacks nesting, so the inspector-friendliness argument no longer applies — nest freely inside it. `appearance: base-select` (Chrome 133+) is the current example: everything inside that `@supports` block in `custom-select.css` uses `&`-nesting instead of repeating the `.select:not(...)` selector.
+
+Check the gating feature's baseline against nesting's before relying on this: if a future gate ships on a browser older than nesting's baseline, flatten that block back out.
+
+### Vendor prefixes and engine hooks
+
+Keep a browser-specific prefix only when it reaches a still-relevant engine behavior that the standard property does not cover, or when it targets a browser-only native part. Examples include `-webkit-mask-*` where needed and pseudo-elements such as `::-webkit-scrollbar` or `::-webkit-progress-value`.
+
+Do not retain a prefixed duplicate merely to preserve an optional visual enhancement on older browsers. If the unprefixed declaration or an earlier fallback keeps the component functional and legible, prefer the smaller rule set.
+
+### color-mix fallbacks
+
+Every `color-mix()` declaration needs a flat fallback outside `@supports` (older browsers drop the whole property, not just the function).
+
+### Hover rules
+
+Hover rules that change surface colors go inside `@media (hover: hover)`. `:active` feedback stays unguarded.
+
+### forced-colors
+
+The default theme maps public color, focus, and shadow tokens to system colors
+inside `forced-colors: active`. Components should rely on those tokens first.
+Use local forced-color rules only for shapes or states the token layer cannot
+infer, such as custom checkbox/switch geometry, native progress/meter parts,
+disabled affordances, tooltip arrows, or selected states otherwise expressed
+only through background color.
+
+### :has()
+
+- Grouping works with `role="group"` and `:has()`: it is a progressive enhancement; UI should still be functional without it.
+- Keep `:has()` out of selector lists that also contain legacy-safe selectors. Put the `:has()` branch in `@supports selector(...)` if necessary.
+- Use `:has()` to improve simple structure, but do not turn it into a monolithic selector.

package/docs/design-notes/cascade-layer.md

@@ -0,0 +1,52 @@
+# Cascade layer strategy
+
+## Purpose
+
+Actual CSS is designed for new projects where its bare class names don't
+conflict. For existing projects that need coexistence, `actual.layer.css`
+wraps the entire framework in a single `@layer actual` so its specificity
+is lower than unlayered author styles.
+
+## Usage
+
+Replace `actual.css` with `actual.layer.css`:
+
+```css
+/* Before — classes may override existing project styles */
+@import "actual-css";
+
+/* After — all Actual rules are scoped to the `actual` layer */
+@import "actual-css/css/layer";
+```
+
+Author styles outside any layer will win over layer styles with equal specificity.
+
+## Layer structure (v0.1)
+
+A single `actual` layer. The internal import order is a contract: later imports
+can override earlier ones within the layer. Sublayers (`actual.reset`,
+`actual.components`, etc.) are reserved for future use if the single layer
+causes real-world override issues.
+
+## Import order contract
+
+Within `actual.css` the order is:
+
+1. Reset and base
+2. Tokens and theme
+3. Layout (container, layout, grid)
+4. Variants and prose
+5. Components
+6. Forms and utilities
+7. Print
+
+This order is stable. If a future version introduces sublayers, the relative
+order will be preserved.
+
+## Limitations
+
+- `actual.layer.css` cannot protect against conflicts with other layered
+  frameworks that also use `@layer actual`. If both projects use the same
+  layer name, the later `@layer` declaration wins.
+- The layer applies only when importing from `actual.layer.css`. Direct
+  imports of individual files bypass the layer.

package/docs/design-notes/css-anchor.md

@@ -0,0 +1,33 @@
+# Future Transition: CSS Anchor Positioning
+
+## Context
+
+Currently, the positioning logic for tooltips, flyouts, and context menus is handled by a custom JavaScript engine (in `floating.js`). This engine computes absolute coordinates, handles viewport boundaries, and applies "flip" and "shift" heuristics to prevent overflow.
+
+As of mid-2024, modern browsers started supporting the **CSS Anchor Positioning API**, which delegates this heavy mathematical lifting directly to the browser's layout engine.
+
+## Migration Path
+
+When global browser support for CSS Anchor Positioning reaches a safe threshold (~95%), the JS positioning engine should be deprecated in favor of a CSS-only approach.
+
+### 1. Element-to-Element Anchoring (Tooltips & Flyouts)
+
+For elements anchored to physical DOM nodes (like a button triggering a flyout), the JS calculation can be fully replaced by CSS:
+
+```css
+.flyout {
+  position: absolute;
+  position-anchor: --trigger-element;
+  top: anchor(bottom);
+  left: anchor(start);
+  
+  /* Replaces the JS flip/shift logic natively */
+  position-try-fallbacks: flip-block, flip-inline;
+}
+```
+
+### 2. The Pointer Coordinates Exception (Context Menus)
+
+CSS Anchor Positioning does not cover 100% of our use cases. Context menus (repositionAt) open at dynamic pointer coordinates (clientX/clientY), not relative to a DOM element.
+
+Therefore, the JS engine cannot be entirely deleted. A lightweight JavaScript layer will still be required to capture the pointer event and pass the coordinates to the DOM (either by updating CSS variables --x/--y, or using the upcoming JS Virtual Anchor API).

package/docs/design-notes/naming.md

@@ -0,0 +1,37 @@
+# Naming conventions
+
+## Sources
+
+- Stick to [uiterms.com](https://uiterms.com/) naming when choosing component and pattern names.
+- Reference [Open UI](https://open-ui.org/) research when designing new primitives.
+
+## Public class grammar
+
+Actual CSS uses bare global class names as its public CSS API. The grammar is:
+
+```
+.component [intent] [variant] [size] [modifier]
+```
+
+Examples:
+
+```html
+<button class="btn primary outline lg">Publish</button>
+<span class="badge success soft">Online</span>
+<section class="card raised stack">...</section>
+```
+
+Documented classes are the public API. Treat them like package exports: adding one is an API decision, renaming or removing one is breaking, and `is-*` classes belong to runtime internals rather than the author API.
+
+Actual CSS is intended for new projects. Existing projects with class collisions should use `actual.layer.css`, import order, or their own prefix transform as a pipeline output. The primary API remains unprefixed.
+
+### Rules
+
+- Classes name components, not markup. Prefer the established UI term even when it matches the element (`.select`, `.table`); do not invent synonyms just to avoid repetition.
+- When one element can host multiple components, use the component role instead of the element name (`.modal` / `.drawer` on `dialog`, `.check` / `.radio` / `.switch` on `input`).
+- Do not merely restate the element when a more precise or canonical component name exists (`.key`, not `.kbd`; `.modal` / `.drawer`, not `.dialog`).
+- Prefer the shortest established term when it improves searchability without drifting from the component vocabulary (`.btn`, not `.button`).
+- Classes name roles and boolean modifiers; `data-*` carries configurable values.
+- `is-*` classes are runtime internals, not author API.
+- Public JS data attributes are namespaced by feature (`data-flyout-*`, `data-context-menu-*`, `data-dialog-*`, `data-tooltip-*`; `data-toast-*` is reserved). Do not expose shared implementation names such as `surface` unless they are meant as a stable author concept.
+- Custom events use the `actual:*` namespace.

package/docs/design-notes/previous-work.md

@@ -0,0 +1,5 @@
+# Previous work
+
+https://github.com/lekoala/liveinit
+https://github.com/lekoala/modern-now
+unpublished css library

package/docs/design-notes/references.md

@@ -0,0 +1,324 @@
+# References
+
+## Positioning
+
+Actual CSS is for new projects that want semantic HTML, small class APIs, theme tokens, and progressive enhancement without a build step.
+
+It claims a small public grammar: `.component [intent] [variant] [size] [modifier]`. For existing projects with collisions, use cascade layers, import order, or an application-side prefix transform.
+
+### Non-goals
+
+- No legacy drop-in promise.
+- No large utility surface.
+- No compatibility build that rewrites the product.
+- No complex widgets.
+
+## Research links
+
+### Forms
+
+- https://oat.ink/components/#form
+- https://picocss.com/docs/forms
+- https://picocss.com/docs/group
+- https://getbootstrap.com/docs/5.3/forms/overview/
+- https://developer.chrome.com/blog/a-customizable-select
+- https://modern-css.com/customizable-selects-without-a-javascript-library/
+- https://smolcss.dev/#smol-focus-styles
+- https://daisyui.com/components/checkbox/
+- https://daisyui.com/components/fieldset/
+- https://daisyui.com/components/label/
+- https://daisyui.com/components/radio/
+- https://daisyui.com/components/range/
+- https://daisyui.com/components/select/
+- https://daisyui.com/components/textarea/
+- https://daisyui.com/components/toggle/
+- https://uiterms.com/slider/
+- https://uiterms.com/switch/
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label
+- https://open-ui.org/components/checkbox.research/
+- https://open-ui.org/components/radio-button.research/
+- https://open-ui.org/components/select.research/
+- https://open-ui.org/components/slider.research/
+- https://open-ui.org/components/switch/
+- https://daisyui.com/components/validator/
+- https://getbootstrap.com/docs/5.3/forms/validation/
+- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/switch_role
+
+### Components: Accordion
+
+- https://picocss.com/docs/accordion
+- https://oat.ink/components/#accordion
+- https://daisyui.com/components/accordion/
+- https://getbootstrap.com/docs/5.3/components/accordion/
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary
+- https://semantic-ui.com/modules/accordion.html
+- https://modern-css.com/accordion-without-javascript/
+- https://modern-css.com/exclusive-accordions-without-javascript/
+- https://uiterms.com/accordion/
+- https://basecoatui.com/components/accordion/
+- https://open-ui.org/components/accordion.explainer/
+
+### Components: Alert
+
+- https://oat.ink/components/#alert
+- https://getbootstrap.com/docs/5.3/components/alerts/
+- https://playground.halfaccessible.com/aria-reference/alert-role
+- https://www.a11y-collective.com/blog/aria-alert/
+- https://primer.style/accessibility/patterns/accessible-notifications-and-messages/
+- https://uiterms.com/alert/
+- https://open-ui.org/components/alert.research/
+- https://kelpui.com/docs/components/callouts/
+
+### Components: Avatar
+
+- https://oat.ink/components/#avatar
+- https://daisyui.com/components/avatar/
+- https://smolcss.dev/#smol-avatar-list
+- https://open-ui.org/components/avatar.research/
+
+### Components: Badge
+
+- https://oat.ink/components/#badge
+- https://daisyui.com/components/badge/
+- https://semantic-ui.com/elements/label.html
+- https://getbootstrap.com/docs/5.3/components/badge/
+- https://uiterms.com/badge/
+- https://m3.material.io/components/badges/overview
+- https://daisyui.com/components/indicator/
+- https://open-ui.org/components/badge.research/
+- https://kelpui.com/docs/components/badges/
+
+### Components: Breadcrumb
+
+- https://oat.ink/components/#breadcrumb
+- https://daisyui.com/components/breadcrumbs/
+- https://getbootstrap.com/docs/5.3/components/breadcrumb/
+- https://gomakethings.com/articles/creating-unstyled-lists/
+- https://uiterms.com/breadcrumbs/
+- https://open-ui.org/components/breadcrumb.research/
+
+### Components: Button
+
+- https://picocss.com/docs/button
+- https://daisyui.com/components/button/
+- https://semantic-ui.com/elements/button.html
+- https://bulma.io/documentation/elements/button/
+- https://oat.ink/components/#button
+- https://getbootstrap.com/docs/5.3/components/buttons/
+- https://moderncss.dev/icon-button-css-styling-guide/
+- https://moderncss.dev/css-button-styling-guide/
+- https://codepen.io/lekoalabe/pen/RNaXBBP
+- https://codepen.io/lekoalabe/pen/oNORPZP
+- https://piccalil.li/blog/how-i-build-a-button-component/
+- https://open-ui.org/components/button/
+- https://kelpui.com/docs/components/buttons/
+
+### Components: Card
+
+- https://oat.ink/components/#card
+- https://daisyui.com/components/card/
+- https://picocss.com/docs/card
+- https://getbootstrap.com/docs/5.3/components/card/
+- https://semantic-ui.com/views/card.html
+- https://smolcss.dev/#smol-card-component
+- https://uiterms.com/card/
+- https://open-ui.org/components/card.research/
+
+### UI: Drawer
+
+- https://oat.ink/components/#sidebar
+- https://daisyui.com/components/drawer/
+- https://mac81.github.io/pure-drawer/
+- https://codepen.io/nwest88/pen/PwwZpv
+- https://uiterms.com/drawer/
+- https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/components/drawer/
+
+### Components: Meter
+
+- https://oat.ink/components/#meter
+
+### UI: Modal / Dialog
+
+- https://oat.ink/components/#dialog
+- https://picocss.com/docs/modal
+- https://daisyui.com/components/modal/
+- https://getbootstrap.com/docs/5.3/components/modal/
+- https://modern-css.com/modal-dialogs-without-a-javascript-library/
+- https://modern-css.com/full-width-without-horizontal-scrollbar-overflow/
+- https://modern-css.com/modal-controls-without-onclick-handlers/
+- https://modern-css.com/dialog-light-dismiss-without-click-outside-listeners/
+- https://uiterms.com/alert-dialog/
+- https://uiterms.com/dialog/
+- https://codepen.io/lekoalabe/pen/GgKOKOE
+- https://pqina.nl/blog/animating-the-dialog-element-using-view-transitions/
+- https://basecoatui.com/components/alert-dialog/
+- https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/components/dialog/
+- https://open-ui.org/components/invokers.explainer/
+- https://open-ui.org/components/dialog.research/
+- https://kelpui.com/docs/components/dialog/
+
+### Components: Pagination
+
+- https://oat.ink/components/#pagination
+- https://daisyui.com/components/pagination/
+- https://uiterms.com/pagination/
+
+### Components: Progress
+
+- https://oat.ink/components/#progress
+- https://daisyui.com/components/progress/
+- https://picocss.com/docs/progress
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress
+- https://getbootstrap.com/docs/5.3/components/progress/
+- https://codepen.io/lekoalabe/pen/NWEzXMO
+
+### Components: Spinner
+
+- https://oat.ink/components/#spinner
+- https://picocss.com/docs/loading
+- https://daisyui.com/components/loading/
+- https://kelpui.com/docs/components/spinner/
+
+### Components: Skeleton
+
+- https://oat.ink/components/#skeleton
+- https://daisyui.com/components/skeleton/
+- https://github.com/Aejkatappaja/phantom-ui
+- https://kelpui.com/docs/components/skeleton/
+
+### Components: Table
+
+- https://picocss.com/docs/table
+- https://oat.ink/components/#table
+- https://getbootstrap.com/docs/5.3/content/tables/
+- https://piccalil.li/blog/styling-tables-the-modern-css-way/
+- https://open-ui.org/components/table.research/
+
+### Layout: Stack
+
+- https://github.com/knadh/oat/blob/master/src/css/utilities.css
+- https://every-layout.dev/layouts/stack/
+- https://kelpui.com/docs/layout/stack/
+
+### Layout: Cluster
+
+- https://modern-css.com/spacing-elements-without-margin-hacks/
+- https://every-layout.dev/layouts/cluster/
+- https://kelpui.com/docs/layout/cluster/
+
+### Layout: Center
+
+- https://picocss.com/docs/container
+- https://smolcss.dev/#smol-container
+- https://every-layout.dev/layouts/center/
+
+### Layout: List
+
+- https://daisyui.com/components/list/
+- https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element
+- https://open-ui.org/components/list.research/
+
+### Layout: Grid
+
+- https://picocss.com/docs/grid
+- https://oat.ink/components/#grid
+- https://modern-css.com/grid-layout-without-extra-wrappers/
+- https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert/
+- https://smolcss.dev/#smol-css-grid
+- https://kelpui.com/docs/layout/grid/
+
+### Layout: Sidebar
+
+- https://every-layout.dev/layouts/sidebar/
+- https://kelpui.com/docs/layout/sidecar/
+
+### Layout: Switcher
+
+- https://every-layout.dev/layouts/switcher/
+
+### Layout: Frame
+
+- https://every-layout.dev/layouts/frame/
+
+### Layout: Header and Footer
+
+- https://uiterms.com/sticky-header/
+- https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Sticky_footers
+- https://crinkles.dev/writing/enhanced-sticky-footer/
+- https://prismic.io/blog/css-sticky-footers
+- https://modern-css.com/sticky-headers-without-javascript-scroll-listeners/
+- https://picocss.com/docs/landmarks-section
+
+### Utilities
+
+- https://piccalil.li/blog/a-modern-css-reset/
+- https://www.a11yproject.com/posts/how-to-hide-content/
+- https://getbootstrap.com/docs/5.3/content/tables/#responsive-tables
+- https://picocss.com/docs/overflow-auto
+- https://github.com/knadh/oat/blob/master/src/css/utilities.css
+
+### Tokens
+
+- https://primer.style/product/primitives/
+- https://picocss.com/docs/css-variables
+- https://nordhealth.design/tokens
+- https://oat.ink/customizing/
+- https://modern-css.com/theme-variables-without-a-preprocessor/
+
+### Typography
+
+- https://daisyui.com/docs/layout-and-typography/
+- https://nordhealth.design/typography
+- https://primer.style/product/primitives/typography/
+- https://picocss.com/docs/typography
+- https://piccalil.li/blog/a-more-modern-css-reset/
+- https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale/
+
+### Patterns
+
+- https://picocss.com/docs/nav
+- https://daisyui.com/components/navbar/
+- https://kelpui.com/docs/components/navbar/
+
+### UI: Flyout / Menu
+
+- https://oat.ink/components/#menu
+- https://daisyui.com/components/menu/
+- https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
+- https://github.com/lekoala/pure-context-menu
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover
+- https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/components/menu/
+- https://getbootstrap.com/docs/5.3/components/popovers/#overview
+- https://open-ui.org/components/menu.research/
+
+### UI: Tabs
+
+- https://www.makethingsaccessible.com/guides/responsive-and-accessible-tabbed-interfaces/
+- https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+- https://uiterms.com/tabs/
+- https://m3.material.io/components/tabs/accessibility
+- https://css-tricks.com/pure-css-tabs-with-details-grid-and-subgrid/
+- https://basecoatui.com/components/tabs/
+- https://daisyui.com/components/tab/
+- https://inclusive-components.design/tabbed-interfaces/
+- https://open-ui.org/components/tabs.research/
+- https://kelpui.com/docs/components/tabs/
+
+### UI: Tooltip
+
+- https://oat.ink/components/#tooltip
+- https://picocss.com/docs/tooltip
+- https://uiterms.com/tooltip/
+- https://vispero.com/resources/using-the-html-title-attribute-updated/
+- https://codepen.io/lekoalabe/pen/JoPNWpX
+- https://m3.material.io/components/tooltips/overview
+- https://basecoatui.com/components/tooltip/
+- https://daisyui.com/components/tooltip/
+- https://open-ui.org/components/tooltip.research/
+
+### UI: Scrollspy
+
+- https://getbootstrap.com/docs/5.3/components/scrollspy/
+- https://una.im/scroll-target-group/
+- https://www.sarasoueidan.com/blog/css-scrollspy/