@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/maths/maths.css

@@ -0,0 +1,220 @@
+/* Maths: KaTeX's output, sized to the body font and coloured by the tokens, for Equation, Maths
+   and EquationReference. Load KaTeX's own stylesheet before @oneonefour/rkui/styles.css, so these
+   rules win. A display equation sits in a wrapper that is a scroll region (overflow.css) for when
+   it is too wide (tabindex="0" lets the keyboard scroll it). Its id is the anchor that equation
+   references link to.
+
+   <div class="rkui-equation rkui-scroll" id="eq-lorenz" tabindex="0" role="region" aria-label="Equation 1">
+     <span class="katex-display">…KaTeX output, with \tag{1}…</span>
+   </div>
+
+   A bare wrapper is the default. Modifiers on .rkui-equation: --panel (a panel), --rule (a
+   rule down the left) and --key (a raised dashed panel for a key result). --rule and --key have
+   side borders of their own, so they take .rkui-scroll--bar too, in place of the dots. Equation
+   numbers, and references to them in prose (.rkui-eqref), are small lilac pills.
+
+   Colour-coded terms: \htmlClass{rkui-maths-teal}{…}, one class per palette hue, put the hue's tint
+   behind the term. */
+
+/* KaTeX's maths italic x-height matches Xmind's at 1.15em; KaTeX's own default is 1.21em. */
+.katex {
+  font-size: var(--rkui-maths-scale, 1.15em);
+}
+
+/* Never wider than its container, even in one that sizes to its content (a flex column, a folder
+   sheet): a wide equation scrolls instead. */
+.rkui-equation {
+  max-inline-size: 100%;
+  margin-block: var(--rkui-space-5);
+  overflow-y: hidden;
+  border-radius: var(--rkui-radius);
+  scroll-margin-block: var(--rkui-space-6);
+}
+
+/* A wide equation keeps its full width, so the number sits after it rather than on top of it.
+   Padding on both sides keeps a short equation centred and clear of its number. */
+.rkui-equation > .katex-display {
+  inline-size: max-content;
+  min-inline-size: 100%;
+  margin: 0;
+  padding: var(--rkui-space-2);
+  border-radius: inherit;
+}
+
+.rkui-equation .katex-html:has(> .katex-tag) {
+  padding-inline: 2.5em;
+}
+
+/* The equation a reference jumped to flashes a tint, then fades back. The tint fills the whole
+   wrapper, dots' gutters included, so it lines up with the focus band. Where the wrapper already
+   runs the scroll region's dots animation (overflow.css), the flash is added to that list.
+   Longhands only, as in overflow.css. */
+.rkui-equation:is(:target, :has(:target)) {
+  animation-name: rkui-equation-target;
+  animation-duration: 2s;
+  animation-timing-function: ease-in;
+}
+
+@supports (animation-timeline: scroll()) {
+  .rkui-equation:is(:target, :has(:target)) {
+    animation-name: rkui-scroll-more, rkui-equation-target;
+    animation-duration: auto, 2s;
+    animation-timing-function: linear, ease-in;
+    animation-fill-mode: both, none;
+    animation-timeline: scroll(self inline), auto;
+  }
+}
+
+@keyframes rkui-equation-target {
+  from,
+  40% {
+    background-color: var(--rkui-apricot-tint);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rkui-equation:is(:target, :has(:target)) {
+    background-color: var(--rkui-apricot-tint);
+  }
+}
+
+.rkui-equation--panel {
+  background: var(--rkui-panel);
+}
+
+.rkui-equation--panel > .katex-display {
+  padding: var(--rkui-space-4);
+}
+
+.rkui-equation--rule {
+  border-inline-start: var(--rkui-space-1) solid var(--rkui-grape);
+  border-radius: 0;
+}
+
+.rkui-equation--key {
+  margin-inline-end: var(--rkui-shadow-offset);
+  border: var(--rkui-outline-width) dashed var(--rkui-line-unfilled);
+  background: var(--rkui-yellow-tint);
+  box-shadow: var(--rkui-shadow);
+}
+
+.rkui-equation--key > .katex-display {
+  padding: var(--rkui-space-4);
+}
+
+/* \boxed{…}: KaTeX draws a hairline, which the toon look thickens. */
+.katex .fbox {
+  border-width: var(--rkui-outline-width);
+  border-radius: calc(var(--rkui-radius) / 2);
+}
+
+/* Each number is "(", the digits and ")"; the pill replaces the brackets. The pill is vivid lilac
+   with ink text in both themes: the dark lilac tint is too close to the dark page. */
+.katex-tag .mord.text {
+  padding-inline: 0.5em;
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-lilac);
+  color: var(--rkui-on-fill);
+  font-family: var(--rkui-font-body);
+  font-size: 0.75em;
+  font-weight: 600;
+}
+
+.katex-tag .mord.text > :is(:first-child, :last-child) {
+  display: none;
+}
+
+/* An equation reference in prose is a pill like the equation's number. Its brackets are in spans,
+   so it still reads "(2)" without CSS. A reference that starts or carries a sentence puts the word
+   in the link, optionally after an .rkui-icon:
+   <a class="rkui-eqref" href="#eq-lorenz"><span>(</span>2<span>)</span></a>
+   <a class="rkui-eqref" href="#eq-lorenz">Equation <span>(</span>2<span>)</span></a> */
+.rkui-eqref {
+  --rkui-icon-fill: var(--rkui-lilac);
+
+  padding-inline: 0.5em;
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-lilac);
+  color: var(--rkui-on-fill);
+  /* An equation number's pill is 0.75em of KaTeX's font, which is --rkui-maths-scale of the
+     text's */
+  font-size: calc(0.75 * var(--rkui-maths-scale, 1.15em));
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.rkui-eqref > span {
+  display: none;
+}
+
+/* Sized to the pill's text and lowered to sit on its baseline like a letter, so neither the pill
+   nor the line grows. */
+.rkui-eqref .rkui-icon {
+  --rkui-icon-stroke: 28;
+
+  inline-size: 1em;
+  block-size: 1em;
+  margin-inline-end: 0.25em;
+  color: inherit;
+  vertical-align: -0.125em;
+}
+
+.rkui-eqref:hover {
+  box-shadow: inset 0 0 0 var(--rkui-outline-width) var(--rkui-line);
+}
+
+/* A pill has no outline for the band to hug, so the band hugs a ring of the outline colour, as on
+   equations. */
+.rkui-eqref:focus-visible {
+  outline: var(--rkui-focus-width) solid var(--rkui-focus);
+  outline-offset: var(--rkui-outline-width);
+  box-shadow: 0 0 0 var(--rkui-outline-width) var(--rkui-line-unfilled);
+}
+
+/* Colour-coded terms: the hue's tint behind --rkui-fg text. */
+.rkui-maths-teal {
+  --rkui-term-tint: var(--rkui-teal-tint);
+}
+
+.rkui-maths-yellow {
+  --rkui-term-tint: var(--rkui-yellow-tint);
+}
+
+.rkui-maths-navy {
+  --rkui-term-tint: var(--rkui-navy-tint);
+}
+
+.rkui-maths-green {
+  --rkui-term-tint: var(--rkui-green-tint);
+}
+
+.rkui-maths-sky {
+  --rkui-term-tint: var(--rkui-sky-tint);
+}
+
+.rkui-maths-coral {
+  --rkui-term-tint: var(--rkui-coral-tint);
+}
+
+.rkui-maths-grape {
+  --rkui-term-tint: var(--rkui-grape-tint);
+}
+
+.rkui-maths-tangerine {
+  --rkui-term-tint: var(--rkui-tangerine-tint);
+}
+
+.rkui-maths-lilac {
+  --rkui-term-tint: var(--rkui-lilac-tint);
+}
+
+.rkui-maths-apricot {
+  --rkui-term-tint: var(--rkui-apricot-tint);
+}
+
+.katex .enclosing[class*='rkui-maths-'] {
+  padding-inline: 0.15em;
+  border-radius: calc(var(--rkui-radius) / 2);
+  background: var(--rkui-term-tint);
+}

package/src/components/maths/render-maths.ts

@@ -0,0 +1,45 @@
+// TeX to KaTeX's HTML, for Equation and Maths. KaTeX is an optional peer dependency: a site that
+// uses the maths components installs it, and loads its stylesheet before rkui's.
+import katex from 'katex'
+import type { Hue } from '../../shared/hues'
+
+/** The hues with a term class in maths.css; each has a `\<hue>{…}` macro for a colour-coded term. */
+export const TERM_HUES: Hue[] = [
+  'teal',
+  'yellow',
+  'navy',
+  'green',
+  'sky',
+  'coral',
+  'grape',
+  'tangerine',
+  'lilac',
+  'apricot',
+]
+
+const termMacros = Object.fromEntries(
+  TERM_HUES.map((hue) => [`\\${hue}`, `\\htmlClass{rkui-maths-${hue}}{#1}`]),
+)
+
+/** KaTeX may only write same-page links (equation references) and rkui-maths-* classes. */
+function trust(context: { command: string; url?: string; class?: string }): boolean {
+  if (context.command === '\\href') return context.url?.startsWith('#') ?? false
+  if (context.command === '\\htmlClass') return context.class?.startsWith('rkui-maths-') ?? false
+  return false
+}
+
+/**
+ * Renders TeX to KaTeX's HTML, with MathML for screen readers. A TeX error throws, which stops
+ * the build.
+ */
+export function renderMaths(tex: string, display: boolean): string {
+  return katex.renderToString(tex, {
+    displayMode: display,
+    output: 'htmlAndMathml',
+    throwOnError: true,
+    trust,
+    // \htmlClass is a KaTeX extension, which strict mode would warn about.
+    strict: (code: string) => (code === 'htmlExtension' ? 'ignore' : 'warn'),
+    macros: termMacros,
+  })
+}

package/src/components/motion/Motion.vue

@@ -0,0 +1,23 @@
+<!--
+  A Pause button above a group of animations (the slot). While Pause is pressed, every CSS
+  animation in the group pauses; the rest of the page keeps moving. It works without JavaScript,
+  so an Astro page gives it no `client:` directive. `class`, `style` and other attributes go on the
+  div.
+
+  @example
+  <Motion><Spinner /><Dots /></Motion>
+-->
+<script setup lang="ts">
+import PauseIcon from '@oneonefour/rkui/icons/pause.vue'
+import Button from '../button/Button.vue'
+</script>
+
+<template>
+  <div class="rkui-motion">
+    <Button toggle small class="rkui-motion-pause">
+      <PauseIcon class="rkui-icon" />
+      Pause
+    </Button>
+    <slot />
+  </div>
+</template>

package/src/components/motion/motion.css

@@ -0,0 +1,19 @@
+/* Motion: a Pause toggle button (button.css) that pauses the animations in its own group. Only the
+   Pause that is the group's own child counts, so a checkbox in the content, or a nested group's
+   Pause, doesn't pause it.
+
+   <div class="rkui-motion">
+     <label class="rkui-button rkui-button--small rkui-motion-pause">
+       <input class="rkui-visually-hidden" type="checkbox">
+       <svg class="rkui-icon" aria-hidden="true">…pause…</svg>
+       Pause
+     </label>
+     …animated content…
+   </div> */
+
+/* !important, or a component's own animation shorthand would set it running again. */
+.rkui-motion:has(> .rkui-motion-pause > :checked) *,
+.rkui-motion:has(> .rkui-motion-pause > :checked) *::before,
+.rkui-motion:has(> .rkui-motion-pause > :checked) *::after {
+  animation-play-state: paused !important;
+}

package/src/components/number/Stepper.vue

@@ -0,0 +1,138 @@
+<!--
+  A number input with step buttons in place of the browser's spinners, inside a Field. The buttons
+  step by `step` within `min` and `max`, and fire `input` and `change` as typing would. In an
+  Astro page they need `client:visible`; without it the buttons stay hidden and the input still
+  takes typing. `class` and `style` go on the Field's div when there is a label, hint or error,
+  otherwise on the `.rkui-stepper` div; other attributes (name, min, max, step, disabled,
+  aria-label, ...) go on the input. Without a label, give it an `aria-label`. In a `.vue` file,
+  `v-model` is the input's value: a number once typed or stepped, or '' while the input is empty.
+  Without one, `value` is the starting value.
+
+  @example
+  <Stepper client:visible label="Quantity" name="quantity" min="0" max="10" value="3" />
+  <Stepper v-model="quantity" label="Quantity" min="0" max="10" />
+-->
+<script setup lang="ts">
+import { onMounted, ref, useAttrs, useTemplateRef } from 'vue'
+import CaretUpIcon from '@oneonefour/rkui/icons/caret-up.vue'
+import CaretDownIcon from '@oneonefour/rkui/icons/caret-down.vue'
+import Button from '../button/Button.vue'
+import Field from '../field/Field.vue'
+import { useComponentId } from '../../shared/component-id'
+import { useLiveValue } from '../../shared/live-value'
+import { controlAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /**
+   * 'split' (a - and a + button either side of the field) or 'stacked' (up and down arrows inside
+   * the field's end); split when left out. Open, see DECISIONS ("Number stepper").
+   */
+  variant?: 'split' | 'stacked'
+  /** The visible label; none when left out. */
+  label?: string
+  /** A quiet line under the stepper; none when left out. */
+  hint?: string
+  /** An error line under the stepper; it also marks the input invalid; none when left out. */
+  error?: string
+}
+
+const { variant = 'split', label, hint, error } = defineProps<Props>()
+
+const attrs = useAttrs()
+/** The input's value (`v-model`); the page's `value` attribute when left out. */
+const model = defineModel<number | string>()
+if (model.value === undefined) model.value = attrs.value as string | undefined
+// In the browser, what was typed before the stepper woke up wins.
+const vLiveValue = useLiveValue(model)
+const id = (attrs.id as string | undefined) ?? useComponentId('stepper')
+const input = useTemplateRef<HTMLInputElement>('input')
+// Set once the stepper runs in the browser; until then number.css hides the buttons.
+const live = ref(false)
+onMounted(() => (live.value = true))
+
+/**
+ * The page's attributes: `class` and `style` for the Field's div when it draws a frame, otherwise
+ * for the stepper's div (`wrapper`); the rest for the input (`wrappedControl`). `value` is left
+ * out: the model holds it.
+ */
+function pageAttrs() {
+  const { value, ...rest } = attrs
+  return controlAttrs(rest, id, { label, hint, error })
+}
+
+/** Whether the page disabled the input, which disables the buttons too. */
+function disabled() {
+  return attrs.disabled !== undefined && attrs.disabled !== false
+}
+
+/** Steps the input up or down, and fires `input` and `change` when its value changed. */
+function step(direction: 'up' | 'down') {
+  const field = input.value
+  if (!field || field.disabled || field.readOnly) return
+  const before = field.value
+  if (direction === 'up') field.stepUp()
+  else field.stepDown()
+  if (field.value === before) return
+  field.dispatchEvent(new Event('input', { bubbles: true }))
+  field.dispatchEvent(new Event('change', { bubbles: true }))
+}
+</script>
+
+<template>
+  <Field :label :for="id" :hint :error v-bind="pageAttrs().field">
+    <div
+      :class="['rkui-stepper', `rkui-stepper--${variant}`]"
+      :data-rkui-live="live ? '' : undefined"
+      v-bind="pageAttrs().wrapper"
+    >
+      <template v-if="variant === 'split'">
+        <Button data-step="down" aria-label="Decrease" :disabled="disabled()" @click="step('down')">
+          −
+        </Button>
+        <input
+          ref="input"
+          v-live-value
+          v-model="model"
+          class="rkui-input"
+          type="number"
+          v-bind="pageAttrs().wrappedControl"
+        />
+        <Button data-step="up" aria-label="Increase" :disabled="disabled()" @click="step('up')">
+          +
+        </Button>
+      </template>
+      <template v-else>
+        <input
+          ref="input"
+          v-live-value
+          v-model="model"
+          class="rkui-input"
+          type="number"
+          v-bind="pageAttrs().wrappedControl"
+        />
+        <button
+          type="button"
+          tabindex="-1"
+          data-step="up"
+          aria-label="Increase"
+          :disabled="disabled()"
+          @click="step('up')"
+        >
+          <CaretUpIcon />
+        </button>
+        <button
+          type="button"
+          tabindex="-1"
+          data-step="down"
+          aria-label="Decrease"
+          :disabled="disabled()"
+          @click="step('down')"
+        >
+          <CaretDownIcon />
+        </button>
+      </template>
+    </div>
+  </Field>
+</template>

package/src/components/number/number.css

@@ -0,0 +1,116 @@
+/* Number steppers: a number input with our own step buttons in place of the browser's
+   spinners. The buttons step only with Stepper.vue running in the browser, which marks the
+   stepper data-rkui-live; until then they stay hidden.
+
+   Split: − and + buttons either side of the field.
+   <div class="rkui-stepper rkui-stepper--split">
+     <button class="rkui-button" type="button" data-step="down" aria-label="Decrease">−</button>
+     <input class="rkui-input" type="number" aria-label="Label">
+     <button class="rkui-button" type="button" data-step="up" aria-label="Increase">+</button>
+   </div>
+
+   Stacked: up and down arrow buttons inside the field's end. The buttons skip the tab order
+   because the arrow keys already step the focused field, as with native spinners.
+   <div class="rkui-stepper rkui-stepper--stacked">
+     <input class="rkui-input" type="number" aria-label="Label">
+     <button type="button" tabindex="-1" data-step="up" aria-label="Increase"><svg>…</svg></button>
+     <button type="button" tabindex="-1" data-step="down"
+       aria-label="Decrease"><svg>…</svg></button>
+   </div> */
+
+.rkui-stepper .rkui-input {
+  inline-size: 8rem;
+  appearance: textfield;
+}
+
+.rkui-stepper .rkui-input::-webkit-inner-spin-button,
+.rkui-stepper .rkui-input::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+/* Until the Stepper runs in the browser (it sets data-rkui-live), the buttons would do nothing. */
+.rkui-stepper:not([data-rkui-live]) button {
+  visibility: hidden;
+}
+
+/* Split */
+
+.rkui-stepper--split {
+  display: inline-flex;
+  align-items: stretch;
+  gap: var(--rkui-space-2);
+}
+
+.rkui-stepper--split .rkui-input {
+  text-align: center;
+}
+
+.rkui-stepper--split .rkui-button {
+  --rkui-button-padding-inline: 0;
+
+  justify-content: center;
+  inline-size: 2.75rem;
+}
+
+/* Stacked */
+
+.rkui-stepper--stacked {
+  --rkui-arrow-width: 1.75rem;
+
+  position: relative;
+  display: inline-grid;
+}
+
+.rkui-stepper--stacked .rkui-input {
+  padding-inline-end: calc(var(--rkui-arrow-width) + var(--rkui-space-2));
+}
+
+.rkui-stepper--stacked button {
+  position: absolute;
+  inset-inline-end: var(--rkui-outline-width);
+  display: grid;
+  place-items: center;
+  inline-size: var(--rkui-arrow-width);
+  block-size: calc(50% - var(--rkui-outline-width));
+  padding: 0;
+  border: 0;
+  border-inline-start: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  background: transparent;
+  color: var(--rkui-fg);
+  cursor: pointer;
+  transition: box-shadow var(--rkui-duration-fast) ease;
+}
+
+.rkui-stepper--stacked [data-step='up'] {
+  inset-block-start: var(--rkui-outline-width);
+  border-block-end: calc(var(--rkui-outline-width) / 2) solid var(--rkui-line-unfilled);
+  border-start-end-radius: calc(var(--rkui-radius) - var(--rkui-outline-width));
+}
+
+.rkui-stepper--stacked [data-step='down'] {
+  inset-block-end: var(--rkui-outline-width);
+  border-block-start: calc(var(--rkui-outline-width) / 2) solid var(--rkui-line-unfilled);
+  border-end-end-radius: calc(var(--rkui-radius) - var(--rkui-outline-width));
+}
+
+.rkui-stepper--stacked svg {
+  --rkui-icon-stroke: 28;
+
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.rkui-stepper--stacked button:enabled:hover {
+  background: var(--rkui-selected);
+  color: var(--rkui-on-selected);
+}
+
+.rkui-stepper--stacked button:enabled:active {
+  box-shadow: var(--rkui-shadow-inset);
+}
+
+.rkui-stepper--stacked button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}

package/src/components/number/stepper-element.ts

@@ -0,0 +1,6 @@
+// <rkui-stepper> for plain HTML pages, bundled into dist/rkui.js: <rkui-stepper label="Quantity"
+// value="3" min="0" max="10"></rkui-stepper>.
+import { defineElement } from '../../shared/define-element'
+import Stepper from './Stepper.vue'
+
+defineElement('rkui-stepper', Stepper)

package/src/components/overflow/Scroll.vue

@@ -0,0 +1,43 @@
+<!--
+  A scroll region: content that scrolls sideways when it is too wide, with three dots at each edge
+  showing there is more to see and a toon scrollbar on hover and focus. It is keyboard focusable
+  and named. The slot is the content. `class`, `style` and other attributes go on the `<div>`.
+  Every component that scrolls takes the same `dots`, and passes the scrollbar settings
+  (`--rkui-scroll-thumb` and the rest, overflow.css) set on it or around it down to its scrollbar.
+
+  @example
+  <Scroll label="Results" dots="pill"><table>…</table></Scroll>
+-->
+<script setup lang="ts">
+interface Props {
+  /** The region's accessible name; give it or `labelledby`; none when left out. */
+  label?: string
+  /** The id of the element that names the region, in place of `label`; none when left out. */
+  labelledby?: string
+  /**
+   * Keeps the scrollbar visible with no dots, for an element with side borders of its own; dots and
+   * a hover scrollbar when left out.
+   */
+  bar?: boolean
+  /**
+   * The dots' look, written as `data-rkui-dots` on the `<div>`: 'plain', or 'pill' for dots in a
+   * raised pill that slides in from the edge; the page's setting when left out.
+   */
+  dots?: 'plain' | 'pill'
+}
+
+const { label, labelledby, bar, dots } = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="['rkui-scroll', { 'rkui-scroll--bar': bar }]"
+    tabindex="0"
+    role="region"
+    :aria-label="label"
+    :aria-labelledby="labelledby"
+    :data-rkui-dots="dots"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/overflow/overflow-enhance.js

@@ -0,0 +1,45 @@
+/* Browsers without scroll-driven animations (Safari before 26, Firefox before 159) can't run the
+   animation that shows a scroll region's "more" dots (overflow.css). Where it is missing, this
+   sets the same two properties from the scroll position whenever a region scrolls, changes size
+   or changes content, including regions added to the page later. */
+import { eachElement } from '../../shared/each-element.js'
+
+if (!CSS.supports('animation-timeline: scroll()')) {
+  const REGIONS = '.rkui-scroll:not(.rkui-scroll--bar)'
+  // The keyframes' 5%: how much of the scroll each side's dots take to fade.
+  const FADE = 0.05
+
+  /** Sets the region's dots as the animation's keyframes would for its scroll position. */
+  const showMore = (region) => {
+    const range = region.scrollWidth - region.clientWidth
+    if (range <= 0) {
+      region.style.setProperty('--rkui-scroll-more-start', 0)
+      region.style.setProperty('--rkui-scroll-more-end', 0)
+      return
+    }
+    const progress = Math.min(1, Math.abs(region.scrollLeft) / range)
+    region.style.setProperty('--rkui-scroll-more-start', Math.min(1, progress / FADE))
+    region.style.setProperty('--rkui-scroll-more-end', Math.min(1, (1 - progress) / FADE))
+  }
+
+  const resized = new ResizeObserver((entries) => {
+    for (const entry of entries) showMore(entry.target)
+  })
+  eachElement(REGIONS, 'data-rkui-scroll-watched', (region) => resized.observe(region))
+
+  // Content that changes inside a region can change how far it scrolls without changing its size.
+  new MutationObserver((records) => {
+    for (const { target } of records) {
+      const region = (target instanceof Element ? target : target.parentElement)?.closest(REGIONS)
+      if (region) showMore(region)
+    }
+  }).observe(document.documentElement, { childList: true, characterData: true, subtree: true })
+
+  document.addEventListener(
+    'scroll',
+    (event) => {
+      if (event.target.matches?.(REGIONS)) showMore(event.target)
+    },
+    { capture: true, passive: true },
+  )
+}