@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/folder/tab-slot.ts

@@ -0,0 +1,80 @@
+import { Comment, Fragment, Text, type VNode } from 'vue'
+import { slotHtml } from '../../shared/slot-html'
+import { readTabs } from './tab-items'
+import Tab from './Tab.vue'
+
+/**
+ * One tab read from a group's slot. A tab written in a .vue file comes with its slot as vnodes
+ * (`panel`); a Tab written in MDX or .astro reaches Vue already rendered, as HTML (`html`).
+ */
+export interface SlotTab {
+  label: string
+  selected: boolean
+  panel?: () => VNode[]
+  html?: string
+}
+
+/** A group's slot, split into its tabs and everything outside them, in one of the two shapes. */
+interface SlotParts {
+  tabs: SlotTab[]
+  /** What was outside the tabs in a .vue file. */
+  outside: VNode[]
+  /** What was outside the tabs in MDX or .astro, as HTML. */
+  outsideHtml: string
+}
+
+/** Whether a vnode renders nothing a reader would see: a comment or whitespace. */
+function isBlank(vnode: VNode): boolean {
+  return vnode.type === Comment || (vnode.type === Text && !String(vnode.children).trim())
+}
+
+/** A slot's vnodes in order, with fragments (`v-for`) opened up and blank ones left out. */
+function slotVnodes(vnodes: VNode[]): VNode[] {
+  return vnodes.flatMap((vnode) => {
+    if (vnode.type === Fragment && Array.isArray(vnode.children)) {
+      return slotVnodes(vnode.children as VNode[])
+    }
+    return isBlank(vnode) ? [] : [vnode]
+  })
+}
+
+/** A Tab read from its vnode's props and slot. `selected` alone arrives as ''. */
+function vnodeTab(vnode: VNode): SlotTab {
+  const selected = vnode.props?.selected
+  const children = vnode.children as { default?: () => VNode[] } | null
+  return {
+    label: String(vnode.props?.label),
+    selected: selected === '' || selected === true || selected === 'true',
+    panel: children?.default,
+  }
+}
+
+/**
+ * Reads the tabs out of a Folder slot, in order, and everything outside them. A slot
+ * written in MDX or .astro arrives as HTML (slot-html.ts) and is read with tab-items.ts; Tab vnodes
+ * from a .vue file are read from their props. The first tab marked `selected` is the selected
+ * one, or the first tab when none is. Stops with a clear message when there are no tabs.
+ */
+export function readSlotTabs(vnodes: VNode[]): SlotParts {
+  const parts: SlotParts = { tabs: [], outside: [], outsideHtml: '' }
+  for (const vnode of slotVnodes(vnodes)) {
+    const html = slotHtml(vnode)
+    if (vnode.type === Tab) {
+      parts.tabs.push(vnodeTab(vnode))
+    } else if (html !== undefined) {
+      const { tabs, outside } = readTabs(html)
+      parts.tabs.push(
+        ...tabs.map(({ label, selected, content }) => ({ label, selected, html: content })),
+      )
+      parts.outsideHtml += outside
+    } else {
+      parts.outside.push(vnode)
+    }
+  }
+  if (parts.tabs.length === 0) throw new Error('Folder needs at least one Tab.')
+  // The first tab marked selected wins, or the first tab when none is marked.
+  const marked = parts.tabs.findIndex((tab) => tab.selected)
+  const first = marked === -1 ? 0 : marked
+  parts.tabs.forEach((tab, i) => (tab.selected = i === first))
+  return parts
+}

package/src/components/header-band/HeaderBand.vue

@@ -0,0 +1,52 @@
+<!--
+  A header band: a full-width block of colour at the top of a page or a section, with a small kicker
+  line over the page's heading, and a hard rule along its foot. Its colour is the page's section hue
+  unless `hue` picks one, so it tells the reader which part of the site they are in. The slot holds
+  the heading, at whatever level fits the page, and an optional line under it. `kicker` is a string,
+  or a list of strings joined with " · ": `:kicker="['Section', 'kicker']"` in Vue,
+  `kicker={['Section', 'kicker']}` in Astro and MDX. Needs no JavaScript. `class`, `style` and other
+  attributes go on the `<header>`.
+
+  @example
+  <HeaderBand :kicker="['Section', 'kicker']">
+    <h1>The page's title</h1>
+  </HeaderBand>
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { hueVars, type HueOrHex } from '../../shared/hues'
+
+interface Props {
+  /**
+   * The small line over the heading, such as the section's name; none when left out. A list is
+   * joined with " · ".
+   */
+  kicker?: string | string[]
+  /**
+   * The band's fill, a hue or a hex code. When left out, the page's section hue (`--rkui-section`);
+   * with none, ink in light mode, and the page's colour with a line under it in dark mode.
+   */
+  hue?: HueOrHex
+}
+
+const { kicker, hue } = defineProps<Props>()
+
+/** The kicker as one line. */
+const kickerText = computed(() => (Array.isArray(kicker) ? kicker.join(' · ') : kicker))
+
+/** The band's fill and text as custom properties, when `hue` is set. */
+const vars = computed(() =>
+  hueVars(hue, {
+    fill: '--rkui-header-band-hue',
+    text: '--rkui-header-band-on-hue',
+    solid: true,
+  }),
+)
+</script>
+
+<template>
+  <header class="rkui-header-band" :style="vars">
+    <p v-if="kickerText" class="rkui-header-band-kicker">{{ kickerText }}</p>
+    <slot />
+  </header>
+</template>

package/src/components/header-band/header-band.css

@@ -0,0 +1,54 @@
+/* Header band: a full-width block of colour at the top of a page or a section, with a small
+   kicker line over the page's heading, and a hard rule along its foot. Static, so it has no
+   outline or shadow.
+
+   <header class="rkui-header-band">
+     <p class="rkui-header-band-kicker">Section · kicker</p>
+     <h1>The page's title</h1>
+   </header>
+
+   --rkui-header-band-hue and --rkui-header-band-on-hue set the fill and the text (HeaderBand.vue's
+   `hue`). Left alone, the band is the page's section hue (--rkui-section) if it sets one; with
+   none, it is ink in light mode, and in dark mode it lets the page's colour show, with a line
+   along its foot in the colour of an outline without a fill, which any fill covers. That is the
+   Table's header band rule (DECISIONS, "Table header band in dark mode"). */
+
+.rkui-header-band {
+  --rkui-header-band-hue: var(--rkui-section, light-dark(var(--rkui-ink), transparent));
+  --rkui-header-band-on-hue: var(--rkui-on-section, light-dark(var(--rkui-on-ink), var(--rkui-fg)));
+  --rkui-header-band-underline: light-dark(transparent, var(--rkui-line-unfilled));
+
+  display: grid;
+  gap: var(--rkui-space-1);
+  padding: var(--rkui-space-5) clamp(var(--rkui-space-4), 5vw, var(--rkui-space-6));
+  border-block-end: var(--rkui-outline-width) solid var(--rkui-line);
+  background:
+    linear-gradient(var(--rkui-header-band-hue), var(--rkui-header-band-hue)),
+    linear-gradient(var(--rkui-header-band-underline), var(--rkui-header-band-underline)) bottom /
+      100% var(--rkui-outline-width) no-repeat;
+  color: var(--rkui-header-band-on-hue);
+}
+
+.rkui-header-band-kicker {
+  margin: 0;
+  font-size: var(--rkui-step--1);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+/* The page's heading, at any level, as one big slab. */
+.rkui-header-band > :is(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+  color: inherit;
+  font-family: var(--rkui-font-display);
+  font-size: var(--rkui-step-3);
+  font-weight: 800;
+  line-height: var(--rkui-line-height-heading);
+  text-wrap: balance;
+}
+
+.rkui-header-band > p:not(.rkui-header-band-kicker) {
+  margin: 0;
+  max-inline-size: 60ch;
+}

package/src/components/icon/icon.css

@@ -0,0 +1,20 @@
+/* Inline SVG icons from icons/. --rkui-icon-stroke is in the icons' 256-unit viewBox, so 21 is
+   about 2px at 24px. --rkui-icon-fill inherits: set it on the icon or any container. When nothing
+   sets it, each icon uses its own default fill, written into the SVG. The globes' ocean has its own
+   hook, --rkui-icon-ocean. */
+
+.rkui-icon {
+  --rkui-icon-stroke: 21;
+
+  flex: none;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  color: var(--rkui-fg);
+}
+
+.rkui-icon--small {
+  --rkui-icon-stroke: 24;
+
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}

package/src/components/input/Input.vue

@@ -0,0 +1,69 @@
+<!--
+  A text-like input: a native `<input>` in the `.rkui-input` frame, inside a Field. `class` and
+  `style` go on the Field's div when there is a label, hint or error, otherwise on the input; other
+  attributes (name, placeholder, disabled, required, ...) go on the input. Without a label, give it
+  an `aria-label`. Search and file inputs have their own components: Search, File. In a `.vue`
+  file, `v-model` is the input's value (a number for `type="number"`). With `v-model`, the
+  parent's value is the starting value; `value` applies only without one. In Safari on macOS and
+  in Firefox, `type="month"` and `type="week"` fall back to a plain text box.
+
+  @example
+  <Input label="Email" type="email" name="email" hint="We never share it" />
+  <Input v-model="email" label="Email" type="email" />
+-->
+<script setup lang="ts">
+import { useAttrs } from '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 {
+  /** The input's type; text when left out. */
+  type?: string
+  /** The visible label; none when left out. */
+  label?: string
+  /** A quiet line under the input; none when left out. */
+  hint?: string
+  /** An error line under the input; it also marks the input invalid; none when left out. */
+  error?: string
+  /**
+   * The hover cue: 'ring', 'underline' or 'none'; the background sinks to the page colour when
+   * left out.
+   */
+  hover?: 'ring' | 'underline' | 'none'
+}
+
+const { type = 'text', label, hint, error, hover } = defineProps<Props>()
+
+const attrs = useAttrs()
+/** The input's value (`v-model`); the page's `value` attribute when left out. */
+const model = defineModel<string | number>()
+if (model.value === undefined) model.value = attrs.value as string | undefined
+// In the browser, what was typed before the input woke up wins.
+const vLiveValue = useLiveValue(model)
+const id = (attrs.id as string | undefined) ?? useComponentId('input')
+
+/**
+ * The page's attributes, split between the Field and the input. Without a frame the input is the
+ * outermost element, so it takes `class` and `style` too. `value` is left out: the model holds it.
+ */
+function pageAttrs() {
+  const { value, ...rest } = attrs
+  return controlAttrs(rest, id, { label, hint, error })
+}
+</script>
+
+<template>
+  <Field :label :for="id" :hint :error v-bind="pageAttrs().field">
+    <input
+      v-live-value
+      v-model="model"
+      :class="['rkui-input', hover && `rkui-hover-${hover}`]"
+      :type
+      v-bind="pageAttrs().control"
+    />
+  </Field>
+</template>

package/src/components/input/Textarea.vue

@@ -0,0 +1,68 @@
+<!--
+  A multi-line text input: a native `<textarea>` in the `.rkui-input` frame, inside a Field.
+  `class` and `style` go on the Field's div when there is a label, hint or error, otherwise on the
+  textarea; other attributes (name, rows, placeholder, disabled, ...) go on the textarea. The
+  slot is its starting text, trimmed. Without a label, give it an `aria-label`. In a `.vue`
+  file, `v-model` is the textarea's text. With `v-model`, the parent's value is the starting
+  value unless it is undefined; then the slot applies and is handed to the parent.
+
+  @example
+  <Textarea label="Message" name="message" rows="4" />
+  <Textarea v-model="message" label="Message" rows="4" />
+-->
+<script setup lang="ts">
+import { useAttrs, useSlots } from 'vue'
+import Field from '../field/Field.vue'
+import { useComponentId } from '../../shared/component-id'
+import { useLiveValue } from '../../shared/live-value'
+import { modelWithStart } from '../../shared/model-start'
+import { slotText } from '../../shared/slot-html'
+import { controlAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The visible label; none when left out. */
+  label?: string
+  /** A quiet line under the textarea; none when left out. */
+  hint?: string
+  /** An error line under the textarea; it also marks the textarea invalid; none when left out. */
+  error?: string
+  /**
+   * The hover cue: 'ring', 'underline' or 'none'; the background sinks to the page colour when
+   * left out.
+   */
+  hover?: 'ring' | 'underline' | 'none'
+}
+
+const { label, hint, error, hover } = defineProps<Props>()
+
+const attrs = useAttrs()
+/** The textarea's text (`v-model`); the slot's text, trimmed, when left out. */
+const model = defineModel<string>()
+// Trimmed, as a textarea would otherwise show the indentation Prettier adds around it.
+const slots = useSlots()
+const text = modelWithStart(model, () => slotText(slots.default?.() ?? []).trim())
+// In the browser, what was typed before the textarea woke up wins.
+const vLiveValue = useLiveValue(text)
+const id = (attrs.id as string | undefined) ?? useComponentId('textarea')
+
+/**
+ * The page's attributes, split between the Field and the textarea. Without a frame the textarea
+ * is the outermost element, so it takes `class` and `style` too.
+ */
+function pageAttrs() {
+  return controlAttrs(attrs, id, { label, hint, error })
+}
+</script>
+
+<template>
+  <Field :label :for="id" :hint :error v-bind="pageAttrs().field">
+    <textarea
+      v-live-value
+      v-model="text"
+      :class="['rkui-input', hover && `rkui-hover-${hover}`]"
+      v-bind="pageAttrs().control"
+    />
+  </Field>
+</template>

package/src/components/input/input.css

@@ -0,0 +1,66 @@
+/* Text inputs and textareas. They are flat, with no shadow at rest or on hover. Mark errors with
+   aria-invalid="true". select.css reuses this look. */
+
+.rkui-input,
+.rkui-select {
+  inline-size: 100%;
+  max-inline-size: 30rem;
+  padding: var(--rkui-space-2) var(--rkui-space-3);
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius);
+  background-color: var(--rkui-raised);
+  color: var(--rkui-fg);
+  font-weight: 400;
+  line-height: var(--rkui-line-height-body);
+}
+
+.rkui-input::placeholder {
+  color: var(--rkui-muted);
+}
+
+textarea.rkui-input {
+  min-block-size: 6rem;
+  resize: vertical;
+}
+
+.rkui-input[aria-invalid='true'],
+.rkui-select[aria-invalid='true'] {
+  border-color: var(--rkui-coral-deep);
+  background-color: var(--rkui-coral-tint);
+}
+
+/* Hover cue. By default the background sinks to the page colour. Put .rkui-hover-none,
+   .rkui-hover-ring or .rkui-hover-underline on a field or any ancestor (a form, the page) to swap
+   it. All of them stay flat. */
+
+:root {
+  --rkui-input-hover-background: var(--rkui-surface);
+  --rkui-input-hover-shadow: none;
+}
+
+.rkui-hover-none {
+  --rkui-input-hover-background: var(--rkui-raised);
+}
+
+/* A 1px inner ring makes the border look thicker, without moving anything. */
+.rkui-hover-ring {
+  --rkui-input-hover-background: var(--rkui-raised);
+  --rkui-input-hover-shadow: inset 0 0 0 1px var(--rkui-line-unfilled);
+}
+
+/* A teal underline inside the bottom border. */
+.rkui-hover-underline {
+  --rkui-input-hover-background: var(--rkui-raised);
+  --rkui-input-hover-shadow: inset 0 calc(-1 * var(--rkui-outline-width)) 0 var(--rkui-teal-deep);
+}
+
+@media (hover: hover) {
+  :is(.rkui-input, .rkui-select):enabled:hover {
+    box-shadow: var(--rkui-input-hover-shadow);
+  }
+
+  /* Fields in error keep their coral fill. */
+  :is(.rkui-input, .rkui-select):enabled:not([aria-invalid='true']):hover {
+    background-color: var(--rkui-input-hover-background);
+  }
+}

package/src/components/light-direction/LightDirection.vue

@@ -0,0 +1,64 @@
+<!--
+  Turns the light for the whole page, to check every shadow: a slider for where the light comes
+  from (degrees clockwise from the top) and a switch that makes it follow the time of day. It sets
+  --rkui-shadow-dx and --rkui-shadow-dy on `<html>`. `class`, `style` and other attributes go on
+  the div; the page lays out the two controls inside it.
+
+  It runs in the browser, so in an Astro page it needs `client:visible`. Without it the controls
+  show but turn nothing.
+
+  @example
+  <LightDirection client:visible />
+-->
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import Field from '../field/Field.vue'
+import Range from '../range/Range.vue'
+import Switch from '../switch/Switch.vue'
+import { useComponentId } from '../../shared/component-id'
+import { DEFAULT_ANGLE, shadowOffsets, sunAngle } from '../../shared/light-angle.js'
+
+/** How often the light moves while it follows the time of day. */
+const CLOCK_INTERVAL_MS = 60_000
+
+const id = useComponentId('light-direction')
+/** Where the light comes from, in whole degrees, as the slider shows it. */
+const angle = ref(DEFAULT_ANGLE)
+/** Whether the light follows the time of day, which also disables the slider. */
+const followsClock = ref(false)
+let clockTimer: ReturnType<typeof setInterval> | undefined
+
+/** Points every shadow on the page away from a light at `lightAngle`. */
+function turnLight(lightAngle: number) {
+  const { dx, dy } = shadowOffsets(lightAngle)
+  document.documentElement.style.setProperty('--rkui-shadow-dx', dx)
+  document.documentElement.style.setProperty('--rkui-shadow-dy', dy)
+}
+
+/** Moves the slider and the light to where the sun is now. */
+function showTime() {
+  angle.value = Math.round(sunAngle(new Date()))
+}
+
+onMounted(() => turnLight(angle.value))
+watch(angle, turnLight)
+
+watch(followsClock, (follow) => {
+  clearInterval(clockTimer)
+  if (follow) {
+    showTime()
+    clockTimer = setInterval(showTime, CLOCK_INTERVAL_MS)
+  }
+})
+
+onBeforeUnmount(() => clearInterval(clockTimer))
+</script>
+
+<template>
+  <div>
+    <Field label="Light from (degrees clockwise from the top)" :for="id">
+      <Range :id v-model="angle" min="0" max="359" :disabled="followsClock" />
+    </Field>
+    <Switch v-model="followsClock">Follow the time of day</Switch>
+  </div>
+</template>

package/src/components/light-direction/light-direction-element.ts

@@ -0,0 +1,6 @@
+// <rkui-light-direction> for plain HTML pages, bundled into dist/rkui.js:
+// <rkui-light-direction></rkui-light-direction>.
+import { defineElement } from '../../shared/define-element'
+import LightDirection from './LightDirection.vue'
+
+defineElement('rkui-light-direction', LightDirection)

package/src/components/loader/Loader.vue

@@ -0,0 +1,39 @@
+<!--
+  The hop loader: a ball hops back and forth along a line, squashing as it lands. Each hop covers
+  about the same distance (`--rkui-loader-hop-length`), so a wider loader takes more hops. Give it a
+  `hue`, or an icon to ride in a bigger ball. The slot holds that icon, with class "rkui-icon". A
+  busy indicator with `role="status"`; the label is read out, not shown. `class`, `style` and other
+  attributes go on the `<div>`.
+
+  @example
+  <Loader hue="coral" label="Fetching…"><StarIcon class="rkui-icon" aria-hidden="true" /></Loader>
+-->
+<script setup lang="ts">
+import { useSlots } from 'vue'
+import { hueVars, type HueOrHex } from '../../shared/hues'
+
+interface Props {
+  /** What is happening, for screen readers; "Loading…" when left out. */
+  label?: string
+  /** The ball's colour, a hue or a hex code; teal when left out. */
+  hue?: HueOrHex
+}
+
+const { label = 'Loading…', hue } = defineProps<Props>()
+const slots = useSlots()
+
+/** The custom properties for what is set: the fill, and the text colour only with an icon. */
+function vars() {
+  return hueVars(hue, {
+    fill: '--rkui-loader-fill',
+    text: slots.default ? '--rkui-loader-on-fill' : undefined,
+  })
+}
+</script>
+
+<template>
+  <div class="rkui-loader rkui-loader--hop" role="status" :style="vars()">
+    <span class="rkui-loader-ball"><slot /></span>
+    <span class="rkui-visually-hidden">{{ label }}</span>
+  </div>
+</template>

package/src/components/loader/loader.css

@@ -0,0 +1,132 @@
+/* Loader: an indeterminate bar with more character than the progress bar's. Like the spinners,
+   give it role="status" and a visually hidden label.
+   .rkui-loader--hop: a ball hops back and forth along a line, squashing as it lands. Each hop
+     covers about --rkui-loader-hop-length, so a wider loader takes more hops, and the ball
+     always lands at each end. Set --rkui-loader-fill to recolour it, and put an icon in the ball
+     to have it ride in a bigger one.
+   Under reduced motion nothing moves: the ball fades in and out instead.
+
+   <div class="rkui-loader rkui-loader--hop" role="status"
+     style="--rkui-loader-fill: var(--rkui-coral)">
+     <span class="rkui-loader-ball"><svg class="rkui-icon" aria-hidden="true">…</svg></span>
+     <span class="rkui-visually-hidden">Loading…</span>
+   </div> */
+
+/* A container, so the moving parts can travel the loader's width in cqi. */
+.rkui-loader {
+  --rkui-loader-edge: var(--rkui-line);
+
+  position: relative;
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: 30rem;
+  overflow: hidden;
+  container-type: inline-size;
+}
+
+/* Hop has no track, only the ground. Set --rkui-loader-fill on the loader for the ball's colour,
+   and --rkui-loader-on-fill for its icon's. */
+.rkui-loader--hop {
+  --rkui-loader-fill: var(--rkui-teal);
+  --rkui-loader-on-fill: var(--rkui-on-fill);
+  --rkui-ball-size: 0.875rem;
+  --rkui-hop-height: 1.1rem;
+  --rkui-loader-hop-length: 4rem;
+  --rkui-loader-hop-time: var(--rkui-loop-quick);
+
+  block-size: calc(var(--rkui-ball-size) + var(--rkui-hop-height) + 0.25rem);
+  border-block-end: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+}
+
+.rkui-loader--hop:has(> .rkui-loader-ball > .rkui-icon) {
+  --rkui-ball-size: 1.5rem;
+}
+
+/* The ball travels and hops in two animations of its translate, the hop added to the travel. A
+   hop lands every --rkui-loader-hop-time, and a crossing takes a whole number of hops: the travel
+   over --rkui-loader-hop-length, rounded, at least one.
+   tan(atan2(a, b)) is a / b as a plain number. --rkui-ball-edge leaves room for the squash at
+   each end. */
+.rkui-loader-ball {
+  --rkui-ball-edge: calc(var(--rkui-ball-size) * 0.15);
+  --rkui-ball-travel: calc(100cqi - var(--rkui-ball-size) - 2 * var(--rkui-ball-edge));
+  --rkui-hops: max(1, round(tan(atan2(var(--rkui-ball-travel), var(--rkui-loader-hop-length)))));
+
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  inline-size: var(--rkui-ball-size);
+  block-size: var(--rkui-ball-size);
+  border: var(--rkui-outline-width) solid var(--rkui-loader-edge);
+  border-radius: 50%;
+  background: var(--rkui-loader-fill);
+  color: var(--rkui-loader-on-fill);
+  transform-origin: 50% 100%;
+  translate: calc(50cqi - 50%) 0;
+  animation:
+    rkui-hop-travel calc(var(--rkui-hops) * var(--rkui-loader-hop-time)) linear infinite alternate,
+    rkui-hop var(--rkui-loader-hop-time) infinite;
+  animation-composition: replace, add;
+}
+
+.rkui-loader-ball .rkui-icon {
+  --rkui-icon-fill: var(--rkui-loader-fill);
+
+  inline-size: 70%;
+  block-size: 70%;
+  color: inherit;
+}
+
+@keyframes rkui-hop-travel {
+  from {
+    translate: var(--rkui-ball-edge) 0;
+  }
+
+  to {
+    translate: calc(var(--rkui-ball-edge) + var(--rkui-ball-travel)) 0;
+  }
+}
+
+@keyframes rkui-hop {
+  from,
+  to {
+    translate: 0 0;
+    scale: 1.3 0.7;
+    animation-timing-function: ease-out;
+  }
+
+  15% {
+    scale: 0.9 1.1;
+  }
+
+  50% {
+    translate: 0 calc(-1 * var(--rkui-hop-height));
+    scale: 1;
+    animation-timing-function: ease-in;
+  }
+
+  85% {
+    scale: 0.9 1.1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rkui-loader-ball {
+    animation: rkui-spinner-fade var(--rkui-loop-medium) ease-in-out infinite alternate;
+  }
+}
+
+/* Forced colours drop the fills, so the loader uses system colours. */
+@media (forced-colors: active) {
+  .rkui-loader {
+    --rkui-loader-fill: Highlight;
+    --rkui-loader-on-fill: HighlightText;
+    --rkui-loader-edge: CanvasText;
+
+    forced-color-adjust: none;
+    border-color: CanvasText;
+  }
+}