@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/shared/option-slot.ts

@@ -0,0 +1,97 @@
+import {
+  cloneVNode,
+  computed,
+  ref,
+  type ComputedRef,
+  type InjectionKey,
+  type Ref,
+  type VNode,
+  type WritableComputedRef,
+} from 'vue'
+import { fillOptions, NAME_PLACEHOLDER } from './option-group'
+import { slotHtml } from './slot-html'
+
+/** A group's selection: the chosen option's value, or the chosen values when `multiple`. */
+type Selection = string | string[] | undefined
+
+/** What a group hands its options in a Vue tree, by provide and inject. */
+interface OptionGroup {
+  name: string
+  multiple: boolean
+  /** The group's `v-model`. A group with no `v-model` of its own (Segmented) leaves it out. */
+  model?: Ref<Selection>
+}
+
+/**
+ * The provide/inject key for `OptionGroup`, as a `computed`, so a change of name reaches options.
+ */
+export const OPTION_GROUP: InjectionKey<ComputedRef<OptionGroup>> = Symbol('rkui-option-group')
+
+/**
+ * A group's slot with its `name` filled in. Options in a Vue tree read the name by inject, so they
+ * pass through as they are. Options written in MDX or .astro reach Vue already rendered, as HTML
+ * (slot-html.ts), so the name is filled into that.
+ */
+export function fillSlot(vnodes: VNode[], group: OptionGroup): VNode[] {
+  return vnodes.map((vnode) => {
+    const html = slotHtml(vnode)
+    if (html === undefined || !html.includes(NAME_PLACEHOLDER)) return vnode
+    return cloneVNode(vnode, { value: fillOptions(html, group.name, group.multiple) })
+  })
+}
+
+/**
+ * The option vnodes in a slot written in a `.vue` file that are marked `checked`, through loops.
+ */
+function checkedOptions(vnodes: VNode[]): VNode[] {
+  return vnodes.flatMap((vnode) => {
+    const checked = vnode.props?.checked
+    if (checked !== undefined && checked !== false) return [vnode]
+    if (Array.isArray(vnode.children)) return checkedOptions(vnode.children as VNode[])
+    return []
+  })
+}
+
+/**
+ * A group's starting value, from the options marked `checked` in its slot written in a `.vue`
+ * file: all their values when `multiple`, otherwise the first one's. A slot from MDX or .astro is
+ * HTML, with no options to read; there each option keeps its own `checked`.
+ */
+export function checkedValue(vnodes: VNode[], multiple: boolean): Selection {
+  const values = checkedOptions(vnodes).map((vnode) => String(vnode.props?.value))
+  return multiple ? values : values[0]
+}
+
+/** What an option tells `useOptionModel` about itself when it starts. */
+interface OptionState {
+  type: 'checkbox' | 'radio'
+  value: string
+  checked: boolean
+}
+
+/**
+ * An option's state as its input reads it: a list of values for a checkbox, the value for a radio.
+ */
+function ownState({ type, value, checked }: OptionState): Selection {
+  if (type === 'checkbox') return checked ? [value] : []
+  return checked ? value : undefined
+}
+
+/**
+ * What an option's input binds with `v-model`. In a group with a model it is the group's model.
+ * Otherwise (an option on its own, with `group` null, or one Astro renders) it is the option's own
+ * state, starting from `checked`.
+ */
+export function useOptionModel(
+  group: ComputedRef<OptionGroup> | null,
+  start: OptionState,
+): WritableComputedRef<Selection> {
+  const own = ref(ownState(start))
+  return computed({
+    get: () => (group?.value.model ? group.value.model.value : own.value),
+    set(selection) {
+      if (group?.value.model) group.value.model.value = selection
+      else own.value = selection
+    },
+  })
+}

package/src/shared/slot-html.ts

@@ -0,0 +1,53 @@
+import { createStaticVNode, type VNode } from 'vue'
+
+/**
+ * The HTML of a slot that Astro rendered, or undefined for any other vnode. Astro hands a Vue
+ * component each slot written in MDX or .astro as one vnode of its StaticHtml component, whose
+ * `value` prop holds the slot's HTML (a string, or a String object).
+ */
+export function slotHtml(vnode: VNode): string | undefined {
+  const value = vnode.props?.value
+  return typeof value === 'string' || value instanceof String ? String(value) : undefined
+}
+
+/**
+ * A slot's content with no wrapper element, for a slot that sits where a wrapper isn't allowed,
+ * such as inside a `<table>`: vnodes from a `.vue` file as they are, and the HTML Astro rendered
+ * as one static vnode, which is written out unchanged. The HTML shape only exists when Astro
+ * renders on the server, where the static vnode's node count isn't used (it matters only when Vue
+ * hydrates or moves the nodes in a browser), so it is given as 1.
+ */
+export function unwrappedSlot(vnodes: VNode[]): VNode[] {
+  const html = vnodes.length === 1 ? slotHtml(vnodes[0]) : undefined
+  return html === undefined ? vnodes : [createStaticVNode(html, 1)]
+}
+
+/** The character references Astro writes when it escapes text. */
+const NAMED: Record<string, string> = { amp: '&', lt: '<', gt: '>', quot: '"', apos: "'" }
+
+/** Turns Astro's escaped HTML back into the text it shows, as a browser does inside a textarea. */
+function decode(html: string): string {
+  return html.replace(/&(#x[\da-f]+|#\d+|\w+);/gi, (reference, name: string) => {
+    if (name[0] !== '#') return NAMED[name] ?? reference
+    const code =
+      name[1] === 'x' || name[1] === 'X' ? parseInt(name.slice(2), 16) : Number(name.slice(1))
+    return String.fromCodePoint(code)
+  })
+}
+
+/**
+ * The text of a slot. A slot from a `.vue` file is vnodes, whose text is joined. One written in MDX
+ * or .astro is Astro's rendered HTML (`slotHtml`), read as a textarea reads it: its escapes are
+ * undone.
+ */
+export function slotText(vnodes: VNode[]): string {
+  return vnodes
+    .map((vnode) => {
+      const html = slotHtml(vnode)
+      if (html !== undefined) return decode(html)
+      if (typeof vnode.children === 'string') return vnode.children
+      if (Array.isArray(vnode.children)) return slotText(vnode.children as VNode[])
+      return ''
+    })
+    .join('')
+}

package/src/shared/split-attrs.ts

@@ -0,0 +1,64 @@
+// How a component splits the attributes a page gives it (with `inheritAttrs: false`): `class` and
+// `style` for its outermost element, the rest for its native control.
+import { fieldAttrs } from './field-attrs'
+
+/**
+ * A component's attributes, split. `class` and `style` are left out when the page didn't set them,
+ * so an element that binds no style of its own gets no `style=""`.
+ */
+interface SplitAttrs {
+  outer: Record<string, unknown>
+  inner: Record<string, unknown>
+}
+
+/** Splits `attrs` into `class` and `style` (`outer`) and everything else (`inner`). */
+export function splitAttrs(attrs: Record<string, unknown>): SplitAttrs {
+  const { class: className, style, ...inner } = attrs
+  const outer: Record<string, unknown> = {}
+  if (className !== undefined) outer.class = className
+  if (style !== undefined) outer.style = style
+  return { outer, inner }
+}
+
+/** A form control's label, hint and error, which decide whether its Field draws a frame. */
+interface FieldText {
+  label?: string
+  hint?: string
+  error?: string
+}
+
+/** A form control's attributes, split around its Field. */
+interface ControlAttrs {
+  /** For the Field: `class` and `style` when it draws a frame (a label, hint or error). */
+  field: Record<string, unknown>
+  /**
+   * For a native control that is the outermost element when there is no frame (Input, Select):
+   * its `id`, the link to the Field's message, and the rest, with `class` and `style` when there
+   * is no frame.
+   */
+  control: Record<string, unknown>
+  /** For the control's own wrapper (Stepper's div): `class` and `style` when there is no frame. */
+  wrapper: Record<string, unknown>
+  /** For the native control inside that wrapper: as `control`, but never `class` or `style`. */
+  wrappedControl: Record<string, unknown>
+}
+
+/**
+ * Splits a form control's attributes around its Field (see field-attrs.ts). `id` is the control's:
+ * the page's own, or one from `useComponentId()`.
+ */
+export function controlAttrs(
+  attrs: Record<string, unknown>,
+  id: string,
+  { label, hint, error }: FieldText,
+): ControlAttrs {
+  const { outer, inner } = splitAttrs(attrs)
+  const framed = Boolean(label || hint || error)
+  const wrappedControl = framed ? fieldAttrs(id, { hint, error }, inner) : { ...inner, id }
+  return {
+    field: framed ? outer : {},
+    control: framed ? wrappedControl : { ...outer, ...wrappedControl },
+    wrapper: framed ? {} : outer,
+    wrappedControl,
+  }
+}

package/src/shared/starting-option.ts

@@ -0,0 +1,14 @@
+/** What an option's markup says about it: whether it is marked `selected`, and disabled. */
+interface OptionMarks {
+  selected: boolean
+  disabled: boolean
+}
+
+/**
+ * The option a single select starts on, as a browser picks it: the last one marked `selected`, or
+ * else the first not disabled; -1 when there is none.
+ */
+export function startingIndex(options: OptionMarks[]): number {
+  const marked = options.map((option) => option.selected).lastIndexOf(true)
+  return marked !== -1 ? marked : options.findIndex((option) => !option.disabled)
+}

package/src/tokens/colors.css

@@ -0,0 +1,122 @@
+/* rkui colour tokens. Colours are light-dark() pairs that follow color-scheme. */
+
+:root {
+  color-scheme: light dark;
+}
+
+:root[data-theme='light'] {
+  color-scheme: light;
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+/* Highlight: data-highlight on <html> or any container sets the dark-mode colour of the outline on
+   things with no fill: "cream", the default, is the text colour; "dark" is the near-black
+   outline colour. Another value switches back inside it. Light mode draws them in the outline
+   colour either way. */
+:root,
+[data-highlight='cream'] {
+  --rkui-line-unfilled: var(--rkui-fg);
+}
+
+[data-highlight='dark'] {
+  --rkui-line-unfilled: var(--rkui-line);
+}
+
+:root {
+  /* Text, lines and focus */
+  --rkui-fg: light-dark(#1d232f, #f2eee2);
+  --rkui-muted: light-dark(#5b6070, #a3a8b6);
+  --rkui-line: light-dark(#1d232f, #05070b);
+  --rkui-focus: var(--rkui-tangerine);
+  /* Where tangerine surrounds the focused element, set --rkui-focus: var(--rkui-focus-alt) */
+  --rkui-focus-alt: var(--rkui-yellow);
+  /* data-shadow="color"'s shadow for things without a colour of their own: lighter than the page
+     in dark mode */
+  --rkui-shadow-lit: light-dark(var(--rkui-line), #6e7891);
+
+  /* Fills: vivid in both themes */
+  --rkui-ink: #1d232f;
+  --rkui-navy: light-dark(#2c4d6e, #4a78ad);
+  --rkui-teal: light-dark(#2ea6b1, #3bb4bf);
+  --rkui-coral: light-dark(#de4d45, #e8625a);
+  /* Coral for fills with small text: --rkui-coral is too light for white text in light mode */
+  --rkui-coral-solid: light-dark(var(--rkui-coral-deep), var(--rkui-coral));
+  --rkui-yellow: #f4bc38;
+  --rkui-green: light-dark(#7bba3d, #86c44a);
+  --rkui-sky: #8fd3f7;
+  --rkui-grape: light-dark(#7b4fc9, #a584e6);
+  --rkui-lilac: #d4c4f5;
+  --rkui-tangerine: light-dark(#f58a2a, #f5923a);
+  --rkui-apricot: #ffd2a6;
+  /* Glint: a highlight on toon fills, near-white in both themes */
+  --rkui-glint: var(--rkui-on-ink);
+
+  /* Text on fills */
+  --rkui-on-fill: var(--rkui-ink);
+  --rkui-on-ink: light-dark(#f7f3e5, #f2eee2);
+  --rkui-on-navy: #ffffff;
+  --rkui-on-coral: light-dark(#ffffff, var(--rkui-ink));
+  --rkui-on-grape: light-dark(#ffffff, var(--rkui-ink));
+
+  /* Hue text: for text and links on --rkui-surface and --rkui-raised */
+  --rkui-navy-deep: light-dark(#2c4d6e, #8fb3e0);
+  --rkui-teal-deep: light-dark(#176f78, #6fcfd7);
+  --rkui-coral-deep: light-dark(#c8322a, #f08a83);
+  --rkui-yellow-deep: light-dark(#856000, #f7d27a);
+  --rkui-green-deep: light-dark(#3a7016, #a3d977);
+  --rkui-sky-deep: light-dark(#216b9a, #8fd3f7);
+  --rkui-grape-deep: light-dark(#7b4fc9, #b89cf0);
+  --rkui-tangerine-deep: light-dark(#a14c0a, #f8a65c);
+  --rkui-lilac-deep: light-dark(#685796, #d4c4f5);
+  --rkui-apricot-deep: light-dark(#7f512d, #ffd2a6);
+
+  /* Tints: panels that carry --rkui-fg text */
+  --rkui-navy-tint: light-dark(#c7d5e6, #25364f);
+  --rkui-teal-tint: light-dark(#a6dfe3, #173f44);
+  --rkui-coral-tint: light-dark(#f6c1bb, #4d2623);
+  --rkui-yellow-tint: light-dark(#fbdf94, #4a3e18);
+  --rkui-green-tint: light-dark(#c8e5a8, #2a4220);
+  --rkui-sky-tint: light-dark(#8fd3f7, #1e3a50);
+  --rkui-grape-tint: light-dark(#c8b2ff, #4a306b);
+  --rkui-lilac-tint: light-dark(#d4c4f5, #342c55);
+  --rkui-tangerine-tint: light-dark(#feb98f, #603714);
+  --rkui-apricot-tint: light-dark(#ffd2a6, #4a3324);
+
+  /* Sticky notes: a tint in light mode and the vivid fill in dark, both carrying --rkui-on-fill
+     text. The tape that holds one is a see-through wash of the glint. */
+  --rkui-note-yellow: light-dark(var(--rkui-yellow-tint), var(--rkui-yellow));
+  --rkui-note-sky: var(--rkui-sky);
+  --rkui-note-tangerine: light-dark(var(--rkui-tangerine-tint), var(--rkui-tangerine));
+  --rkui-note-green: light-dark(var(--rkui-green-tint), var(--rkui-green));
+  --rkui-note-coral: light-dark(var(--rkui-coral-tint), var(--rkui-coral));
+  --rkui-note-grape: light-dark(var(--rkui-grape-tint), var(--rkui-grape));
+  --rkui-note-lilac: var(--rkui-lilac);
+  --rkui-note-apricot: var(--rkui-apricot);
+  --rkui-note-tape: color-mix(in srgb, var(--rkui-glint) 60%, transparent);
+
+  /* Shading: hatching stripes, the outline colour at a quarter strength over whatever they cross.
+     A fill's shade and an inset's grey step are recipes in shadows.css. */
+  --rkui-stripe: color-mix(in srgb, var(--rkui-line) 25%, transparent);
+
+  /* Icon fills: the quiet default for interface icons, a pale wash of the outline colour */
+  --rkui-icon-fill-neutral: color-mix(in srgb, currentColor 20%, transparent);
+
+  /* Selected: checked and selected controls */
+  --rkui-selected: var(--rkui-yellow);
+  --rkui-on-selected: var(--rkui-on-fill);
+  /* A panel that carries --rkui-fg text, for the selected option's surroundings */
+  --rkui-selected-tint: var(--rkui-yellow-tint);
+
+  /* Section hooks: --rkui-section and --rkui-on-section are left unset, so a component can tell
+     whether a page chose a section hue; each use falls back to --rkui-ink and --rkui-on-ink. */
+
+  /* Code: syntax colours, on the page palette's panel (palettes.css) */
+  --rkui-code-keyword: var(--rkui-navy-deep);
+  --rkui-code-function: var(--rkui-teal-deep);
+  --rkui-code-string: var(--rkui-green-deep);
+  --rkui-code-number: var(--rkui-tangerine-deep);
+  --rkui-code-comment: var(--rkui-muted);
+}

package/src/tokens/fallback.css

@@ -0,0 +1,67 @@
+/* rkui light-only fallback for browsers without light-dark(). */
+
+/* Browsers without light-dark() (before mid-2024) get the light theme, on the cream page. */
+@supports not (color: light-dark(#000, #fff)) {
+  :root,
+  :root[data-theme] {
+    color-scheme: light;
+  }
+
+  :root,
+  [data-palette] {
+    --rkui-surface: #f7f3e5;
+    --rkui-raised: #fffaf0;
+    --rkui-fg: #1d232f;
+    --rkui-muted: #5b6070;
+    --rkui-line: #1d232f;
+    --rkui-shadow-lit: var(--rkui-line);
+
+    --rkui-navy: #2c4d6e;
+    --rkui-teal: #2ea6b1;
+    --rkui-coral: #de4d45;
+    --rkui-coral-solid: var(--rkui-coral-deep);
+    --rkui-green: #7bba3d;
+    --rkui-grape: #7b4fc9;
+    --rkui-tangerine: #f58a2a;
+
+    --rkui-on-ink: #f7f3e5;
+    --rkui-on-coral: #ffffff;
+    --rkui-on-grape: #ffffff;
+
+    --rkui-navy-deep: #2c4d6e;
+    --rkui-teal-deep: #176f78;
+    --rkui-coral-deep: #c8322a;
+    --rkui-yellow-deep: #856000;
+    --rkui-green-deep: #3a7016;
+    --rkui-sky-deep: #216b9a;
+    --rkui-grape-deep: #7b4fc9;
+    --rkui-tangerine-deep: #a14c0a;
+    --rkui-lilac-deep: #685796;
+    --rkui-apricot-deep: #7f512d;
+
+    --rkui-navy-tint: #c7d5e6;
+    --rkui-teal-tint: #a6dfe3;
+    --rkui-coral-tint: #f6c1bb;
+    --rkui-yellow-tint: #fbdf94;
+    --rkui-green-tint: #c8e5a8;
+    --rkui-sky-tint: #8fd3f7;
+    --rkui-grape-tint: #c8b2ff;
+    --rkui-lilac-tint: #d4c4f5;
+    --rkui-tangerine-tint: #feb98f;
+    --rkui-apricot-tint: #ffd2a6;
+
+    --rkui-note-yellow: var(--rkui-yellow-tint);
+    --rkui-note-tangerine: var(--rkui-tangerine-tint);
+    --rkui-note-green: var(--rkui-green-tint);
+    --rkui-note-coral: var(--rkui-coral-tint);
+    --rkui-note-grape: var(--rkui-grape-tint);
+
+    --rkui-panel: #f0ead7;
+    --rkui-panel-tab: #e6dfc8;
+  }
+
+  /* The light theme's shadows have no rim, whatever data-shadow and data-highlight say. */
+  * {
+    --rkui-shadow-edge: transparent;
+  }
+}

package/src/tokens/motion.css

@@ -0,0 +1,31 @@
+/* rkui durations, easings, loops and stagger, and the reduced-motion durations. */
+
+:root {
+  /* Motion */
+  --rkui-duration-fast: 120ms;
+  --rkui-duration-spring: 180ms;
+  --rkui-duration-slide: 320ms;
+  --rkui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Quick start, then a small swing past the target (about 4%) before settling */
+  --rkui-ease-snap: cubic-bezier(0.38, 1.35, 0.52, 1);
+  /* Loops: one cycle of an animation that repeats on its own. Quick for a hop or a stripe's
+     march, short for small busy marks, steady for a turn or a rolling wave, medium for a circuit
+     and the reduced-motion fade, long for fills and sloshes, panel for large areas and diagrams. */
+  --rkui-loop-quick: 0.6s;
+  --rkui-loop-short: 0.9s;
+  --rkui-loop-steady: 1.2s;
+  --rkui-loop-medium: 1.8s;
+  --rkui-loop-long: 2.4s;
+  --rkui-loop-panel: 4s;
+  /* The delay between neighbours that move in turn */
+  --rkui-stagger: 0.15s;
+}
+
+/* Nothing moves under reduced motion; shadows still change. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --rkui-duration-fast: 0ms;
+    --rkui-duration-spring: 0ms;
+    --rkui-duration-slide: 0ms;
+  }
+}

package/src/tokens/palettes.css

@@ -0,0 +1,36 @@
+/* rkui page palettes: the surface, raised and panel colours, and the shading mixed from them. */
+
+/* Page palettes: cream by default. Set data-palette="slate" or "greige" on <html> or any
+   container for a cool or warm grey page, or "cream" to switch back inside another palette.
+   The panel (code blocks, quotes, shaded cards) is a step darker than the page in light mode and
+   lighter in dark; its tab is the next step, the code block's editor-tab strip and a nested
+   quote. */
+:root,
+[data-palette='cream'] {
+  --rkui-surface: light-dark(#f7f3e5, #1a1f2b);
+  --rkui-raised: light-dark(#fffaf0, #232a39);
+  --rkui-panel: light-dark(#f0ead7, #272e3e);
+  --rkui-panel-tab: light-dark(#e6dfc8, #2d3548);
+}
+
+[data-palette='slate'] {
+  --rkui-surface: light-dark(#f1f3f8, #1f232b);
+  --rkui-raised: light-dark(#f9fafc, #282d37);
+  --rkui-panel: light-dark(#e7ebf3, #2c323d);
+  --rkui-panel-tab: light-dark(#dbe0ea, #333946);
+}
+
+[data-palette='greige'] {
+  --rkui-surface: light-dark(#f2f1ee, #252420);
+  --rkui-raised: light-dark(#faf9f8, #302e29);
+  --rkui-panel: light-dark(#eae7e2, #35332e);
+  --rkui-panel-tab: light-dark(#e0dcd6, #3d3a34);
+}
+
+/* Shading mixed from the page colour. A custom property resolves its var()s on the element that
+   declares it, so these are declared again on every palette container. */
+:root,
+[data-palette] {
+  /* The page a step darker, behind the folder's unselected tabs */
+  --rkui-folder-back: color-mix(in srgb, var(--rkui-surface), var(--rkui-line) 8%);
+}

package/src/tokens/shadow-color.css

@@ -0,0 +1,178 @@
+/* The colour shadow: set data-shadow="color" on <html> or any container, and in dark mode each
+   raised thing with a colour of its own casts its hard shadow in that colour, darkened, with no
+   rim: its fill, or the colour it shows on a neutral body (a flask's water, a dial's notch, a
+   table's band). Everything else casts --rkui-shadow-lit, lighter than the page. Light mode is
+   unchanged.
+   data-shadow="outline" or "block" switches back inside it. Browsers without @scope or
+   light-dark() draw the outline shadow instead, and Safari 26.0 to 26.3 keep it on checkboxes,
+   radios and switches. */
+
+/* An element's extrusion is its own: a child doesn't inherit it, so a note's shade never reaches
+   the controls on it. */
+@property --rkui-extrusion {
+  syntax: '*';
+  inherits: false;
+}
+
+/* Each raised thing with a colour of its own: the fill its shade is mixed from, and that shade as
+   its extrusion. Set whatever the shadow look; only the colour shadow below reads them. */
+.rkui-button {
+  --rkui-shade-of: var(--rkui-button-fill);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+:is(.rkui-checkbox, .rkui-radio, .rkui-switch):checked,
+.rkui-dial-face,
+.rkui-clock-hand--hour .rkui-clock-tag,
+.rkui-drawer--blind > .rkui-drawer-handle .rkui-drawer-pull {
+  --rkui-shade-of: var(--rkui-selected);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* In error they fill with coral, on or off. */
+:is(.rkui-checkbox, .rkui-radio, .rkui-switch)[aria-invalid='true'] {
+  --rkui-shade-of: var(--rkui-coral-solid);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* The range's native thumb and the file button are pseudo-elements, so their inputs carry the
+   colour. */
+.rkui-range,
+.rkui-range-thumb {
+  --rkui-shade-of: var(--rkui-selected);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+.rkui-input[type='file'] {
+  --rkui-shade-of: var(--rkui-yellow);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+.rkui-tile--color {
+  --rkui-shade-of: var(--rkui-swatch);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* Every badge, so a table's stickers take it as well as .rkui-badge--sticker. */
+.rkui-badge {
+  --rkui-shade-of: var(--rkui-badge-fill);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+.rkui-spinner-dot {
+  --rkui-shade-of: var(--rkui-spinner-dot-fill);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* The ring's wedge and the flask's water. */
+:is(.rkui-spinner--ring, .rkui-spinner--water) {
+  --rkui-shade-of: var(--rkui-spinner-fill);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* The band's hue. */
+.rkui-alert {
+  --rkui-shade-of: var(--rkui-alert-hue);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* The band's hue, and the lifted row's too: the table's hue, or the section's. With neither,
+   --rkui-shade-of is left without a value and they cast --rkui-shadow-lit. */
+.rkui-table,
+.rkui-table--lift tbody tr {
+  --rkui-shade-of: var(--rkui-table-hue, var(--rkui-section));
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* Its button's fill. */
+.rkui-search-bar {
+  --rkui-shade-of: var(--rkui-yellow);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+.rkui-sidebar-more {
+  --rkui-shade-of: var(--rkui-pill-fill);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* Checked chips and section buttons take --rkui-section where it is set. Where it isn't, their
+   fill is ink, --rkui-shade-of is left without a value and they cast --rkui-shadow-lit. */
+.rkui-chip:is(:has(:checked), [aria-current='page']),
+.rkui-button--section {
+  --rkui-shade-of: var(--rkui-section);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* A card's hue, where it has one; without, it casts --rkui-shadow-lit. :where() keeps this
+   below a sticky note's own colour. */
+:where(.rkui-card--link, .rkui-card--raised) {
+  --rkui-shade-of: var(--rkui-card-hue);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* Tints take the solid colour of their tint, as the tint's own shade is too close to the page:
+   a tinted folder's sheet and the selected tab that joins it, a sidebar's current page and the
+   key equation's panel. */
+.rkui-folder--tinted > .rkui-folder-sheet,
+.rkui-folder--tinted
+  > .rkui-folder-strip
+  .rkui-folder-tab:is(:has(:checked), [aria-current='page']),
+.rkui-sidebar-link[aria-current='page'] {
+  --rkui-shade-of: var(--rkui-selected);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* A coloured drawer or blind: its own shadow, its handle's, its remote tray's and its pull's.
+   The tray's inset, the roller, the screen and the hem are pseudo-elements, which take their
+   element's shadow colour. */
+.rkui-drawer--hue,
+.rkui-drawer--hue > :is(.rkui-drawer-handle, .rkui-drawer-tray),
+.rkui-drawer--hue > .rkui-drawer-handle .rkui-drawer-pull {
+  --rkui-shade-of: var(--rkui-drawer-hue);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+.rkui-equation--key {
+  --rkui-shade-of: var(--rkui-yellow);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* A sidebar's current page filled with its link's own colour (sidebar.css). */
+.rkui-sidebar-link--hue[aria-current='page'] {
+  --rkui-shade-of: var(--rkui-sidebar-hue);
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* sticky-note.css sets the note's --rkui-shade-of, for its fold. */
+.rkui-sticky-note {
+  --rkui-extrusion: var(--rkui-shade);
+}
+
+/* Darkened, these fills are too close to the page to read as a shadow. */
+:is(.rkui-button--navy, .rkui-badge--navy) {
+  --rkui-extrusion: initial;
+}
+
+@supports (color: light-dark(black, white)) {
+  @scope ([data-shadow='color']) to ([data-shadow='outline'], [data-shadow='block']) {
+    /* Declared on every element, the data-shadow one included, so each one resolves its own
+       --rkui-extrusion. The shadow tokens are built on every element too (shadows.css), from
+       these. */
+    :scope,
+    * {
+      --rkui-shadow-edge: transparent;
+      --rkui-shadow-color: light-dark(
+        var(--rkui-line),
+        var(--rkui-extrusion, var(--rkui-shadow-lit))
+      );
+    }
+
+    /* A scroll region's pills are drawn in its background, so they take their own colour
+       (overflow.css). */
+    :scope.rkui-scroll,
+    .rkui-scroll {
+      --rkui-shade-of: var(--rkui-pill-fill);
+      --rkui-pill-shadow-color: light-dark(var(--rkui-line), var(--rkui-shade));
+    }
+  }
+}