@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/code/code.css

@@ -0,0 +1,185 @@
+/* Code block: a panel pressed into the page by a hard inner shadow, with an optional
+   language caption and a copy button. The button stays hidden until CodeBlock.vue runs in the
+   browser and marks the figure data-rkui-live. It comes after the code so that readers reach the code first, and
+   the grid lifts it into the header row. Pre is a scroll region for long lines (overflow.css),
+   which the keyboard can scroll (tabindex="0"). The caption may start with a mark for the
+   language (the site's logo, a file-type icon, or the file extension as text), coloured by
+   --rkui-code-lang-color (default --rkui-muted).
+
+   <figure class="rkui-code">
+     <figcaption class="rkui-code-header">
+       <span class="rkui-code-lang">
+         <svg class="rkui-icon rkui-icon--small" aria-hidden="true">…optional logo or file-type
+           icon…</svg>
+         Python
+       </span>
+     </figcaption>
+     <pre class="rkui-scroll" tabindex="0"><code>…</code></pre>
+     <button type="button" class="rkui-button rkui-button--small rkui-code-copy">
+       <svg class="rkui-icon rkui-icon--small">…copy icon…</svg>
+       <span class="rkui-code-copy-label">Copy</span>
+     </button>
+   </figure>
+
+   It has the same space above and below as an equation or a quote, so code in a page's prose is
+   spaced without a rule of the site's own.
+
+   Without the figcaption there is no title area: the copy button sits in the code's top-right
+   corner. The copy button can be left out too.
+
+   Opt-in modifiers: .rkui-scroll--bar on the pre keeps its scrollbar visible, with no dots
+   (CodeBlock.vue's `bar`), .rkui-code--editor
+   puts the caption in a darker strip, like an editor tab, and .rkui-code--copy-hover shows the
+   copy button only while the pointer is over the block or focus is inside it.
+
+   Highlighted code is coloured by Shiki's css-variables theme (highlight.js), which paints each
+   token with var(--rkui-shiki-token-*); .rkui-code maps those onto the --rkui-code-* colour
+   tokens. */
+
+.rkui-code {
+  --rkui-recess-floor: var(--rkui-panel);
+  --rkui-code-inset: var(--rkui-shadow-recess);
+  /* Where the caption and the code start: past the scroll region's dot gutter where that is
+     wider (the pill look, overflow.css) */
+  --rkui-code-pad: max(var(--rkui-space-4), var(--rkui-dots-gutter));
+
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  margin: var(--rkui-space-5) 0;
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-recess-floor);
+  box-shadow: var(--rkui-code-inset);
+  color: var(--rkui-fg);
+
+  --rkui-shiki-foreground: var(--rkui-fg);
+  --rkui-shiki-background: transparent;
+  --rkui-shiki-token-keyword: var(--rkui-code-keyword);
+  --rkui-shiki-token-function: var(--rkui-code-function);
+  --rkui-shiki-token-string: var(--rkui-code-string);
+  --rkui-shiki-token-string-expression: var(--rkui-code-string);
+  --rkui-shiki-token-constant: var(--rkui-code-number);
+  --rkui-shiki-token-comment: var(--rkui-code-comment);
+  --rkui-shiki-token-parameter: var(--rkui-fg);
+  --rkui-shiki-token-punctuation: var(--rkui-fg);
+  --rkui-shiki-token-link: var(--rkui-navy-deep);
+}
+
+.rkui-code-header {
+  display: flex;
+  align-items: center;
+  grid-row: 1;
+  grid-column: 1 / -1;
+  padding: var(--rkui-space-2) var(--rkui-code-pad) 0;
+}
+
+.rkui-code-lang {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rkui-space-2);
+  color: var(--rkui-muted);
+  font-size: var(--rkui-step--1);
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+/* The mark is sized to the caption text. Wide marks keep their shape: the width follows the
+   viewBox. */
+.rkui-code-lang svg {
+  inline-size: auto;
+  block-size: 1.25em;
+  color: var(--rkui-code-lang-color, var(--rkui-muted));
+}
+
+/* A single-colour logo is paths with no fill of their own, filled with the caption's colour. The
+   file-type icons are lines, marked fill="none", which they keep. */
+.rkui-code-lang svg:not([fill]) {
+  fill: currentColor;
+}
+
+/* The scroll region's dot gutters (overflow.css) take the outer part of the side padding, so the
+   code stays in line with the caption. */
+.rkui-code pre {
+  grid-column: 1 / -1;
+  margin: 0;
+  padding: var(--rkui-space-4);
+  padding-inline: calc(var(--rkui-code-pad) - var(--rkui-scroll-gutter));
+  background-color: transparent;
+  font-size: var(--rkui-step--1);
+  line-height: var(--rkui-line-height-body);
+}
+
+.rkui-code-copy {
+  grid-row: 1;
+  grid-column: 2;
+  align-self: center;
+  margin: var(--rkui-space-2) var(--rkui-space-3) 0 0;
+}
+
+/* No caption: the code takes the first row, and the copy button sits over its top-right corner. */
+.rkui-code:not(:has(> .rkui-code-header)) > pre {
+  grid-row: 1;
+}
+
+.rkui-code:not(:has(> .rkui-code-header)) > .rkui-code-copy {
+  position: relative;
+  align-self: start;
+  margin-block-start: var(--rkui-space-3);
+}
+
+/* Until CodeBlock runs in the browser (it sets data-rkui-live), the button would do nothing. It
+   keeps its space, so the caption row doesn't grow when it shows. */
+.rkui-code:not([data-rkui-live]) > .rkui-code-copy {
+  visibility: hidden;
+}
+
+/* Copy on hover: the button rolls down into place while the pointer is over the block, or focus
+   is inside it, so the keyboard reaches it. It stays put on a touch screen, which has no hover.
+   It moves by transform, as the button's own lift and press use translate, whose transitions are
+   kept. */
+@media (hover: hover) {
+  .rkui-code--copy-hover > .rkui-code-copy {
+    opacity: 0;
+    transform: translateY(-100%);
+    transition:
+      translate var(--rkui-duration-fast) ease,
+      box-shadow var(--rkui-duration-fast) ease,
+      opacity var(--rkui-duration-fast) ease,
+      transform var(--rkui-duration-spring) var(--rkui-ease-snap);
+  }
+
+  .rkui-code--copy-hover:is(:hover, :focus-within) > .rkui-code-copy {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* The panel shows the focus band for its scroll region: a ring of the outline colour for the band
+   to hug. The pre keeps its own focus ring (overflow.css) in browsers without :has(). */
+.rkui-code:has(pre: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),
+    var(--rkui-code-inset);
+}
+
+.rkui-code:has(pre:focus-visible) pre {
+  outline: none;
+  box-shadow: none;
+}
+
+/* The editor look is flat: no inner shadow. A blank shadow, not none, so it can sit in a list. */
+.rkui-code--editor {
+  --rkui-code-inset: 0 0 transparent;
+}
+
+.rkui-code--editor .rkui-code-header {
+  padding-block: var(--rkui-space-2);
+  border-radius: var(--rkui-radius) var(--rkui-radius) 0 0;
+  background: var(--rkui-panel-tab);
+}
+
+.rkui-code--editor .rkui-code-copy {
+  margin-block: var(--rkui-space-2);
+}

package/src/components/code/highlight.js

@@ -0,0 +1,46 @@
+// Syntax highlighting for CodeBlock, run on the server only. Shiki's css-variables theme paints each
+// token with var(--rkui-shiki-token-*), which code.css maps onto the --rkui-code-* colour tokens.
+import { bundledLanguages, createCssVariablesTheme, getSingletonHighlighter } from 'shiki'
+
+const theme = createCssVariablesTheme({ name: 'css-variables', variablePrefix: '--rkui-shiki-' })
+
+/**
+ * A Shiki transformer that keeps only what goes inside the `<code>`: the highlighted lines.
+ * @type {import('shiki').ShikiTransformer}
+ */
+const linesOnly = {
+  root(root) {
+    const pre = root.children[0]
+    const code = pre?.type === 'element' ? pre.children[0] : undefined
+    return { type: 'root', children: code?.type === 'element' ? code.children : [] }
+  },
+}
+
+/**
+ * The Shiki language `lang` and the ones it may hold that Shiki only loads when asked, such as
+ * the languages of a Markdown file's fenced code. None for a language Shiki doesn't know.
+ *
+ * @param {string} lang
+ * @returns {Promise<string[]>}
+ */
+async function languagesFor(lang) {
+  if (!(lang in bundledLanguages)) return []
+  const { default: grammars } = await bundledLanguages[lang]()
+  const embedded = grammars.flatMap((grammar) => grammar.embeddedLangsLazy ?? [])
+  return [lang, ...embedded.filter((name) => name in bundledLanguages)]
+}
+
+/**
+ * Loads Shiki and the language `lang`, and returns a function that highlights code in it (as
+ * plain text for a language Shiki doesn't know), at once, as the HTML that goes inside its
+ * `<code>`. CodeBlock loads it before it renders, and highlights its slot's text as it renders.
+ *
+ * @param {string} lang
+ * @returns {Promise<(code: string) => string>}
+ */
+export async function highlighter(lang) {
+  const langs = await languagesFor(lang)
+  const shiki = await getSingletonHighlighter({ themes: [theme], langs })
+  const known = langs.length ? lang : 'plaintext'
+  return (code) => shiki.codeToHtml(code, { lang: known, theme, transformers: [linesOnly] })
+}

package/src/components/color-picker/ColorInput.vue

@@ -0,0 +1,54 @@
+<!--
+  A native colour input on its own, with no palette, in a frame that pops and a paint brush icon.
+  `class` and `style` go on the frame; other attributes (name, disabled, ...) go on the input. In a
+  `.vue` file, `v-model` is the input's value, a colour such as "#1f6f78". Without one, `value` is
+  the starting colour.
+
+  @example
+  <ColorInput label="Background colour" name="background" />
+  <ColorInput v-model="background" label="Background colour" />
+-->
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import PaintBrushIcon from '@oneonefour/rkui/icons/paint-brush.vue'
+import { useLiveValue } from '../../shared/live-value'
+import { splitAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The input's accessible name. */
+  label: string
+}
+
+const { label } = defineProps<Props>()
+
+const attrs = useAttrs()
+/** The input's value (`v-model`); the page's `value` attribute when left out. */
+const model = defineModel<string>()
+if (model.value === undefined) model.value = attrs.value as string | undefined
+// In the browser, the colour chosen before the input woke up wins.
+const vLiveValue = useLiveValue(model)
+
+/**
+ * The page's attributes: `class` and `style` for the frame (`outer`), the rest for the input.
+ * `value` is left out: the model holds it.
+ */
+function pageAttrs() {
+  const { value, ...rest } = attrs
+  return splitAttrs(rest)
+}
+</script>
+
+<template>
+  <span class="rkui-color-input" v-bind="pageAttrs().outer">
+    <input
+      v-live-value
+      v-model="model"
+      type="color"
+      :aria-label="label"
+      v-bind="pageAttrs().inner"
+    />
+    <PaintBrushIcon />
+  </span>
+</template>

package/src/components/color-picker/ColorPicker.vue

@@ -0,0 +1,110 @@
+<!--
+  A colour picker: a tile group of colour tiles, radios for one choice. The slot holds its
+  ColorTiles; with none, it shows every hue of the palette. `class`, `style` and other attributes go
+  on the fieldset (`disabled` disables the whole group). In a `.vue` file, `v-model` is the chosen
+  tile's value, or 'custom'. With `v-model`, the parent's value is the starting value unless it is
+  undefined; then `value`, or else the first tile marked `checked`, applies and is handed to the
+  parent.
+
+  Without `custom` it works with no JavaScript, in any page; a plain HTML page writes its HTML.
+
+  With `custom` it ends with a custom colour tile: a radio and a native colour input, whose colour
+  is sent as `<name>-custom`. Picking a colour checks that tile, which needs the browser, so:
+  - in an Astro page it needs `client:visible`, and draws every hue itself: ColorTiles written in
+    an Astro page or MDX stop the build. For fewer hues, write the picker in a `.vue` file;
+  - a plain HTML page writes `<rkui-color-picker custom legend="…" value="…">`, which draws every
+    hue.
+  Until it runs, the custom tile is chosen from the keyboard or by clicking its outline.
+
+  @example
+  <ColorPicker v-model="accent" legend="Accent" custom>
+    <ColorTile value="teal" checked />
+    <ColorTile value="coral" />
+  </ColorPicker>
+-->
+<script setup lang="ts">
+import { computed, provide, useSlots, type VNode } from 'vue'
+import PaintBrushIcon from '@oneonefour/rkui/icons/paint-brush.vue'
+import PaletteIcon from '@oneonefour/rkui/icons/palette.vue'
+import ColorTile from './ColorTile.vue'
+import { useComponentId } from '../../shared/component-id'
+import { HUES } from '../../shared/hues'
+import { vLiveChecked } from '../../shared/live-value'
+import { modelWithStart } from '../../shared/model-start'
+import { NAME_PLACEHOLDER } from '../../shared/option-group'
+import { checkedValue, fillSlot, OPTION_GROUP } from '../../shared/option-slot'
+import { slotHtml } from '../../shared/slot-html'
+
+interface Props {
+  /** The group's name; visually hidden unless `flair` is 'stroke'. */
+  legend: string
+  /** The radios' name, filled into every tile; a unique one is made when left out. */
+  name?: string
+  /**
+   * The value chosen at the start: a hue, or 'custom'. Tiles written in an Astro page or MDX say
+   * `checked` instead; the first tile marked `checked` when left out.
+   */
+  value?: string
+  /** End the group with a custom colour tile; none when left out. */
+  custom?: boolean
+  /** Flair for the checked tile; none when left out. Open, see DECISIONS ("Colour-tile flair"). */
+  flair?: 'brush' | 'drops' | 'stroke'
+}
+
+const { legend, name, value, custom, flair } = defineProps<Props>()
+
+/** The chosen tile's value, or 'custom' (`v-model`); `value` or the `checked` tile's when left out. */
+const model = defineModel<string>()
+const slots = useSlots()
+const selection = modelWithStart(model, () => value ?? checkedValue(slots.default?.() ?? [], false))
+const generatedName = useComponentId('color-picker')
+const group = computed(() => ({ name: name ?? generatedName, multiple: false, model: selection }))
+provide(OPTION_GROUP, group)
+
+/**
+ * The tiles from the slot, with the group's name filled in. With `custom` they must be Vue
+ * components: tiles Astro rendered as page HTML would be rebuilt when the picker wakes up.
+ */
+function tiles(vnodes: VNode[]): VNode[] {
+  // Tiles Astro rendered carry the name placeholder that fillSlot fills in.
+  const pageHtml = vnodes.some((vnode) => slotHtml(vnode)?.includes(NAME_PLACEHOLDER))
+  if (custom && pageHtml) {
+    throw new Error(
+      'ColorPicker: with `custom`, its ColorTiles must be written in a .vue file. In an Astro or ' +
+        'MDX page, leave the tiles out to show every hue.',
+    )
+  }
+  return fillSlot(vnodes, group.value)
+}
+</script>
+
+<template>
+  <fieldset :class="['rkui-tiles', flair && `rkui-tiles--${flair}`]">
+    <legend v-if="flair === 'stroke'">
+      <PaletteIcon class="rkui-icon rkui-icon--small" />
+      {{ legend }}
+    </legend>
+    <legend v-else class="rkui-visually-hidden">{{ legend }}</legend>
+    <template v-if="$slots.default">
+      <component :is="tile" v-for="(tile, i) in tiles($slots.default())" :key="i" />
+    </template>
+    <ColorTile v-for="hue in HUES" v-else :key="hue" :value="hue" />
+    <label v-if="custom" class="rkui-tile rkui-tile--custom-color">
+      <input
+        v-live-checked
+        v-model="selection"
+        type="radio"
+        :name="group.name"
+        value="custom"
+        aria-label="Custom colour"
+      />
+      <input
+        type="color"
+        :name="`${group.name}-custom`"
+        aria-label="Choose custom colour"
+        @input="selection = 'custom'"
+      />
+      <PaintBrushIcon />
+    </label>
+  </fieldset>
+</template>

package/src/components/color-picker/ColorTile.vue

@@ -0,0 +1,28 @@
+<!--
+  One colour tile of a ColorPicker: a Tile filled with a hue and named by it, with a radio under
+  it. Put tiles in a ColorPicker, which fills in their `name` and holds their `v-model`. `class`
+  and `style` go on the label; other attributes go on the input.
+
+  @example
+  <ColorTile value="teal" checked />
+-->
+<script setup lang="ts">
+import Tile from '../tiles/Tile.vue'
+import type { Hue } from '../../shared/hues'
+
+interface Props {
+  /** The hue the tile shows, and the value the form sends when it is chosen. */
+  value: Hue
+  /** Starts chosen; unchosen when left out. */
+  checked?: boolean
+  /** Can't be chosen; enabled when left out. */
+  disabled?: boolean
+}
+
+const { value, checked, disabled } = defineProps<Props>()
+</script>
+
+<template>
+  <!-- The Tile finds its ColorPicker by inject, for its input's name and checked state. -->
+  <Tile :value :hue="value" :checked :disabled>{{ value }}</Tile>
+</template>

package/src/components/color-picker/color-picker-element.ts

@@ -0,0 +1,7 @@
+// <rkui-color-picker> for plain HTML pages, bundled into dist/rkui.js, for a picker with a custom
+// colour tile: <rkui-color-picker custom legend="Accent" value="teal"></rkui-color-picker>. It draws
+// every hue. A picker without `custom` needs no element: the page writes its HTML.
+import { defineElement } from '../../shared/define-element'
+import ColorPicker from './ColorPicker.vue'
+
+defineElement('rkui-color-picker', ColorPicker)

package/src/components/color-picker/color-picker.css

@@ -0,0 +1,219 @@
+/* Colour pickers. Colours come from tokens through --rkui-swatch.
+
+   With a palette: a tile group (tiles.css) of colour tiles, each filled from --rkui-swatch and
+   named by hidden text. The checked one is pushed into the page and keeps its colour.
+   <fieldset class="rkui-tiles">
+     <legend class="rkui-visually-hidden">Colour</legend>
+     <label class="rkui-tile rkui-tile--color" style="--rkui-swatch: var(--rkui-teal)">
+       <input type="radio" name="color" value="teal">
+       <span class="rkui-visually-hidden">Teal</span>
+     </label>
+     …
+   </fieldset>
+
+   To allow any colour as well, end the group with a custom colour tile: a radio, a native colour
+   input and a paint brush icon. Picking a colour checks the tile's radio only where ColorPicker
+   runs in the browser; otherwise the radio is checked from the keyboard or by clicking the tile's
+   outline.
+   <fieldset class="rkui-tiles">
+     …
+     <label class="rkui-tile rkui-tile--custom-color">
+       <input type="radio" name="color" value="custom" aria-label="Custom colour">
+       <input type="color" name="color-custom" aria-label="Choose custom colour">
+       <svg aria-hidden="true">…paint-brush…</svg>
+     </label>
+   </fieldset>
+
+   Without a palette: the native colour input on its own, in a frame that pops, with the same
+   paint brush.
+   <span class="rkui-color-input">
+     <input type="color" aria-label="Colour">
+     <svg aria-hidden="true">…paint-brush…</svg>
+   </span> */
+
+/* Colour tiles and the standalone frame are filled, so they take the dark outline in both themes.
+   They keep their colours in forced colours, since the colour is the content. */
+:is(.rkui-tile--color, .rkui-tile--custom-color, .rkui-color-input) {
+  border-color: var(--rkui-line);
+  forced-color-adjust: none;
+}
+
+/* The standalone frame pops like a button (interactive.css). */
+.rkui-color-input {
+  --rkui-picker-radius: calc(var(--rkui-radius) - var(--rkui-outline-width));
+
+  position: relative;
+  display: inline-block;
+  inline-size: 3.5rem;
+  block-size: 2.5rem;
+  border-width: var(--rkui-outline-width);
+  border-style: solid;
+  border-radius: var(--rkui-radius);
+  cursor: pointer;
+}
+
+.rkui-tile--custom-color {
+  --rkui-picker-radius: 50%;
+}
+
+/* The native input fills the custom colour tile or the standalone frame, which shows the focus
+   band for it. --rkui-picker-radius rounds the input and the browser's swatch inside it to
+   match. */
+
+:is(.rkui-tile--custom-color, .rkui-color-input) > input[type='color'] {
+  appearance: none;
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: var(--rkui-picker-radius);
+  outline: none;
+  background: none;
+  cursor: inherit;
+}
+
+:is(.rkui-tile--custom-color, .rkui-color-input)
+  > input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+:is(.rkui-tile--custom-color, .rkui-color-input) > input[type='color']::-webkit-color-swatch {
+  border: 0;
+  border-radius: var(--rkui-picker-radius);
+}
+
+:is(.rkui-tile--custom-color, .rkui-color-input) > input[type='color']::-moz-color-swatch {
+  border: 0;
+  border-radius: var(--rkui-picker-radius);
+}
+
+/* The native input covers the tile and its inset shadow, so a chosen custom tile draws the same
+   shadow again over the input. */
+.rkui-tile--custom-color:has(> input[type='radio']:checked)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: var(--rkui-shadow-inset);
+  pointer-events: none;
+}
+
+/* The paint brush sits on a neutral disc in the corner, so it reads on any picked colour. Clicks
+   pass through it to the input. */
+:is(.rkui-tile--custom-color, .rkui-color-input) > svg {
+  --rkui-icon-stroke: 28;
+
+  position: absolute;
+  inset-block-end: -0.375rem;
+  inset-inline-end: -0.375rem;
+  inline-size: 1.375rem;
+  block-size: 1.375rem;
+  padding: 0.125rem;
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: 50%;
+  background: var(--rkui-raised);
+  color: var(--rkui-fg);
+  forced-color-adjust: auto;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Flair options for colour tiles. With none, the tiles are plain (flair none). Each
+   is a modifier on the group. */
+
+/* Flair A: add .rkui-tiles--brush for a faint paint brush on the checked and hovered colour tiles.
+   The brush is ink; give hues that carry white text their own colour through --rkui-swatch-on:
+   style="--rkui-swatch: var(--rkui-navy); --rkui-swatch-on: var(--rkui-on-navy)". */
+
+.rkui-tiles--brush .rkui-tile--color::after {
+  content: '';
+  position: absolute;
+  inset: 15%;
+  background-color: var(--rkui-swatch-on, var(--rkui-on-fill));
+  mask: url('../../../dist/icons/paint-brush.svg') center / contain no-repeat;
+  opacity: 0;
+  transition: opacity var(--rkui-duration-fast) ease;
+}
+
+.rkui-tiles--brush .rkui-tile--color:has(:checked)::after {
+  opacity: 0.7;
+}
+
+@media (hover: hover) {
+  .rkui-tiles--brush .rkui-tile--color:not(:has(:disabled)):hover::after {
+    opacity: 0.7;
+  }
+}
+
+/* Flair B: add .rkui-tiles--drops for tiles shaped like paint drops: a square with one sharp
+   corner, turned so that corner points up. Turning a tile turns its shadows too, so they are
+   redefined in its own axes: the shadow direction turned back by 45deg. */
+
+.rkui-tiles--drops {
+  --rkui-drop-corners: 0 50% 50% 50%;
+
+  padding-block-start: var(--rkui-space-2);
+}
+
+.rkui-tiles--drops .rkui-tile {
+  --rkui-diagonal: 1.4142;
+  --rkui-drop-dx: calc((var(--rkui-shadow-dx) + var(--rkui-shadow-dy)) * var(--rkui-diagonal) / 2);
+  --rkui-drop-dy: calc((var(--rkui-shadow-dy) - var(--rkui-shadow-dx)) * var(--rkui-diagonal) / 2);
+  --rkui-shadow:
+    calc(var(--rkui-shadow-offset) * var(--rkui-drop-dx))
+      calc(var(--rkui-shadow-offset) * var(--rkui-drop-dy)) 0 var(--rkui-shadow-color),
+    calc(var(--rkui-shadow-offset) * var(--rkui-drop-dx))
+      calc(var(--rkui-shadow-offset) * var(--rkui-drop-dy)) 0 var(--rkui-outline-width)
+      var(--rkui-shadow-edge);
+  --rkui-shadow-hover:
+    calc(var(--rkui-shadow-offset-hover) * var(--rkui-drop-dx))
+      calc(var(--rkui-shadow-offset-hover) * var(--rkui-drop-dy)) 0 var(--rkui-shadow-color),
+    calc(var(--rkui-shadow-offset-hover) * var(--rkui-drop-dx))
+      calc(var(--rkui-shadow-offset-hover) * var(--rkui-drop-dy)) 0 var(--rkui-outline-width)
+      var(--rkui-shadow-edge);
+  --rkui-shadow-pressed:
+    calc(var(--rkui-shadow-offset-pressed) * var(--rkui-drop-dx))
+      calc(var(--rkui-shadow-offset-pressed) * var(--rkui-drop-dy)) 0 var(--rkui-shadow-color),
+    calc(var(--rkui-shadow-offset-pressed) * var(--rkui-drop-dx))
+      calc(var(--rkui-shadow-offset-pressed) * var(--rkui-drop-dy)) 0 var(--rkui-outline-width)
+      var(--rkui-shadow-edge);
+  --rkui-shadow-inset: inset calc(var(--rkui-shadow-offset-pressed) * var(--rkui-drop-dx))
+    calc(var(--rkui-shadow-offset-pressed) * var(--rkui-drop-dy)) 0 var(--rkui-line);
+  --rkui-picker-radius: var(--rkui-drop-corners);
+
+  border-radius: var(--rkui-drop-corners);
+  rotate: 45deg;
+}
+
+.rkui-tiles--drops .rkui-tile--custom-color > svg {
+  rotate: -45deg;
+}
+
+/* Flair C: add .rkui-tiles--stroke for a visible legend with a palette icon and a short paint
+   stroke in the checked colour under the checked tile.
+   <legend><svg class="rkui-icon rkui-icon--small" aria-hidden="true">…</svg> Colour</legend> */
+
+.rkui-tiles--stroke {
+  padding-block-end: var(--rkui-space-4);
+}
+
+.rkui-tiles--stroke legend {
+  display: flex;
+  align-items: center;
+  gap: var(--rkui-space-2);
+  margin-block-end: var(--rkui-space-2);
+  padding: 0;
+  font-weight: 600;
+}
+
+.rkui-tiles--stroke .rkui-tile--color:has(:checked)::after {
+  content: '';
+  position: absolute;
+  inset-block-start: calc(100% + var(--rkui-space-2));
+  inset-inline: calc(-1 * var(--rkui-space-2));
+  block-size: var(--rkui-space-1);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-swatch);
+}