@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/spinner/spinner.css

@@ -0,0 +1,147 @@
+/* Spinners: a busy indicator. Give it role="status" and a visually hidden label, or hide it
+   (aria-hidden) beside a visible one. Set --rkui-spinner-size to resize it.
+   .rkui-spinner--ring: an outlined ring with the hard shadow, and a wedge rolling round inside it
+   as if it had weight.
+   .rkui-spinner--dots: three dots that bounce in turn.
+   Under reduced motion nothing moves: each fades in and out instead.
+
+   <span class="rkui-spinner rkui-spinner--ring" role="status"><span
+     class="rkui-visually-hidden">Loading…</span></span>
+   <span class="rkui-spinner rkui-spinner--dots" role="status">
+     <span class="rkui-spinner-dot"></span><span class="rkui-spinner-dot"></span>
+       <span class="rkui-spinner-dot"></span>
+     <span class="rkui-visually-hidden">Loading…</span>
+   </span> */
+
+.rkui-spinner {
+  --rkui-spinner-size: 2rem;
+  --rkui-spinner-fill: var(--rkui-selected);
+
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+
+/* The wedge turns inside the ring, so the ring's shadow keeps to the light. It starts centred at
+   the top. */
+.rkui-spinner--ring {
+  position: relative;
+  box-sizing: border-box;
+  inline-size: var(--rkui-spinner-size);
+  block-size: var(--rkui-spinner-size);
+  overflow: hidden;
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: 50%;
+  background: var(--rkui-raised);
+  box-shadow: var(--rkui-shadow);
+}
+
+.rkui-spinner--ring::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: conic-gradient(from -45deg, var(--rkui-spinner-fill) 0 0.25turn, transparent 0);
+  animation: rkui-ring-roll var(--rkui-loop-steady) linear infinite;
+}
+
+.rkui-spinner--ring::after {
+  content: '';
+  position: absolute;
+  inset: 28%;
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: 50%;
+  background: var(--rkui-surface);
+}
+
+.rkui-spinner--dots {
+  gap: calc(var(--rkui-spinner-size) / 8);
+  block-size: var(--rkui-spinner-size);
+}
+
+.rkui-spinner-dot {
+  --rkui-spinner-dot-fill: var(--rkui-teal);
+
+  box-sizing: border-box;
+  inline-size: calc(var(--rkui-spinner-size) / 3.5);
+  block-size: calc(var(--rkui-spinner-size) / 3.5);
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  border-radius: 50%;
+  background: var(--rkui-spinner-dot-fill);
+  box-shadow: var(--rkui-shadow-pressed);
+  animation: rkui-bounce var(--rkui-loop-short) ease-in-out infinite;
+}
+
+.rkui-spinner-dot:nth-child(2) {
+  --rkui-spinner-dot-fill: var(--rkui-yellow);
+
+  animation-delay: var(--rkui-stagger);
+}
+
+.rkui-spinner-dot:nth-child(3) {
+  --rkui-spinner-dot-fill: var(--rkui-coral);
+
+  animation-delay: calc(2 * var(--rkui-stagger));
+}
+
+/* Each half turn is eased so the wedge slows over the top and speeds through the bottom. The
+   two curves are mirror images and meet at the same speed, so the roll never jerks. */
+@keyframes rkui-ring-roll {
+  from {
+    rotate: 0turn;
+    animation-timing-function: cubic-bezier(0.5, 0.2, 0.5, 0.2);
+  }
+
+  50% {
+    rotate: 0.5turn;
+    animation-timing-function: cubic-bezier(0.5, 0.8, 0.5, 0.8);
+  }
+
+  to {
+    rotate: 1turn;
+  }
+}
+
+@keyframes rkui-bounce {
+  0%,
+  60%,
+  100% {
+    translate: 0 0;
+  }
+
+  30% {
+    translate: 0 -60%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rkui-spinner--ring::before,
+  .rkui-spinner-dot {
+    animation-name: rkui-spinner-fade;
+    animation-duration: var(--rkui-loop-medium);
+    animation-direction: alternate;
+  }
+}
+
+@keyframes rkui-spinner-fade {
+  to {
+    opacity: 0.3;
+  }
+}
+
+/* Forced colours drop the ring's fills and its wedge, so they use system colours. */
+@media (forced-colors: active) {
+  .rkui-spinner--ring {
+    --rkui-spinner-fill: Highlight;
+
+    forced-color-adjust: none;
+    border-color: CanvasText;
+    background: Canvas;
+  }
+
+  .rkui-spinner--ring::after {
+    border-color: CanvasText;
+    background: Canvas;
+  }
+}

package/src/components/spinner-dots/Dots.vue

@@ -0,0 +1,48 @@
+<!--
+  A three-dot spinner: a busy indicator with `role="status"`; the label is read out, not shown.
+  `class`, `style` and other attributes go on the `<span>`.
+
+  @example
+  <Dots variant="squash" label="Saving…" />
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** What is happening, for screen readers; "Loading…" when left out. */
+  label?: string
+  /**
+   * The motion: 'squash' (a row squashing as it bounces), 'triangle' (dots hop corner to corner) or
+   * 'orbit' (dots chase round a circle); 'bounce' when left out.
+   */
+  variant?: 'bounce' | 'squash' | 'triangle' | 'orbit'
+  /** The spinner's size as a CSS length; 2rem when left out. */
+  size?: string
+}
+
+const { label = 'Loading…', variant = 'bounce', size } = defineProps<Props>()
+
+/** The size as a custom property, when it is set. */
+const vars = computed(() => (size ? { '--rkui-spinner-size': size } : {}))
+</script>
+
+<template>
+  <span
+    :class="[
+      'rkui-spinner',
+      {
+        'rkui-spinner--dots': variant === 'bounce' || variant === 'squash',
+        'rkui-spinner--squash': variant === 'squash',
+        'rkui-spinner--triangle': variant === 'triangle',
+        'rkui-spinner--orbit': variant === 'orbit',
+      },
+    ]"
+    role="status"
+    :style="vars"
+  >
+    <span class="rkui-spinner-dot"></span>
+    <span class="rkui-spinner-dot"></span>
+    <span class="rkui-spinner-dot"></span>
+    <span class="rkui-visually-hidden">{{ label }}</span>
+  </span>
+</template>

package/src/components/spinner-dots/spinner-dots.css

@@ -0,0 +1,167 @@
+/* More three-dot spinners, beside .rkui-spinner--dots in spinner.css, with the same markup: three
+   .rkui-spinner-dot children and a visually hidden label.
+   .rkui-spinner--orbit: the dots chase each other round a circle.
+   .rkui-spinner--triangle: the dots hop from corner to corner of a triangle.
+   .rkui-spinner--dots.rkui-spinner--squash: the row of dots, squashing and stretching as it
+   bounces. The dots move but never turn, so their shadows keep to the light. Under reduced motion
+   they stay put and fade in and out instead.
+
+   <span class="rkui-spinner rkui-spinner--orbit" role="status">
+     <span class="rkui-spinner-dot"></span><span class="rkui-spinner-dot"></span>
+       <span class="rkui-spinner-dot"></span>
+     <span class="rkui-visually-hidden">Loading…</span>
+   </span> */
+
+.rkui-spinner--orbit,
+.rkui-spinner--triangle {
+  position: relative;
+  inline-size: var(--rkui-spinner-size);
+  block-size: var(--rkui-spinner-size);
+}
+
+.rkui-spinner--orbit .rkui-spinner-dot,
+.rkui-spinner--triangle .rkui-spinner-dot {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+}
+
+/* Each dot goes round on a turned arm and turns back by the same amount, so it stays upright. */
+.rkui-spinner--orbit {
+  --rkui-orbit-radius: calc(var(--rkui-spinner-size) * -0.35);
+}
+
+.rkui-spinner--orbit .rkui-spinner-dot {
+  --rkui-orbit-turn: 0turn;
+
+  transform: rotate(var(--rkui-orbit-turn)) translateY(var(--rkui-orbit-radius))
+    rotate(calc(-1 * var(--rkui-orbit-turn)));
+  animation: rkui-orbit var(--rkui-loop-steady) ease-in-out infinite backwards;
+}
+
+.rkui-spinner--orbit .rkui-spinner-dot:nth-child(2) {
+  --rkui-orbit-turn: 0.333turn;
+
+  animation-delay: var(--rkui-stagger);
+}
+
+.rkui-spinner--orbit .rkui-spinner-dot:nth-child(3) {
+  --rkui-orbit-turn: 0.667turn;
+
+  animation-delay: calc(2 * var(--rkui-stagger));
+}
+
+@keyframes rkui-orbit {
+  from {
+    transform: rotate(0turn) translateY(var(--rkui-orbit-radius)) rotate(0turn);
+  }
+
+  to {
+    transform: rotate(1turn) translateY(var(--rkui-orbit-radius)) rotate(-1turn);
+  }
+}
+
+/* The corners, from the middle, with the triangle centred in the box. */
+.rkui-spinner--triangle {
+  --rkui-corner-top: 0 calc(var(--rkui-spinner-size) * -0.255);
+  --rkui-corner-right: calc(var(--rkui-spinner-size) * 0.294) calc(var(--rkui-spinner-size) * 0.255);
+  --rkui-corner-left: calc(var(--rkui-spinner-size) * -0.294) calc(var(--rkui-spinner-size) * 0.255);
+}
+
+/* One hop path for all three dots, each started a third of the way further along it. */
+.rkui-spinner--triangle .rkui-spinner-dot {
+  translate: var(--rkui-corner-top);
+  animation: rkui-triangle-hop var(--rkui-loop-medium) var(--rkui-ease-snap) infinite;
+}
+
+.rkui-spinner--triangle .rkui-spinner-dot:nth-child(2) {
+  translate: var(--rkui-corner-right);
+  animation-delay: calc(var(--rkui-loop-medium) / -3);
+}
+
+.rkui-spinner--triangle .rkui-spinner-dot:nth-child(3) {
+  translate: var(--rkui-corner-left);
+  animation-delay: calc(var(--rkui-loop-medium) * -2 / 3);
+}
+
+@keyframes rkui-triangle-hop {
+  0%,
+  20% {
+    translate: var(--rkui-corner-top);
+  }
+
+  33.333%,
+  53.333% {
+    translate: var(--rkui-corner-right);
+  }
+
+  66.667%,
+  86.667% {
+    translate: var(--rkui-corner-left);
+  }
+
+  100% {
+    translate: var(--rkui-corner-top);
+  }
+}
+
+/* Crouch, stretch on the way up, round at the top, stretch on the way down, squash on landing,
+   then settle. */
+.rkui-spinner--squash .rkui-spinner-dot {
+  transform-origin: 50% 100%;
+  animation: rkui-squash var(--rkui-loop-short) infinite;
+}
+
+.rkui-spinner--squash .rkui-spinner-dot:nth-child(2) {
+  animation-delay: var(--rkui-stagger);
+}
+
+.rkui-spinner--squash .rkui-spinner-dot:nth-child(3) {
+  animation-delay: calc(2 * var(--rkui-stagger));
+}
+
+@keyframes rkui-squash {
+  0%,
+  66%,
+  100% {
+    translate: 0 0;
+    scale: 1;
+  }
+
+  10% {
+    translate: 0 0;
+    scale: 1.3 0.7;
+    animation-timing-function: ease-out;
+  }
+
+  20% {
+    scale: 0.8 1.25;
+  }
+
+  35% {
+    translate: 0 -80%;
+    scale: 1;
+    animation-timing-function: ease-in;
+  }
+
+  45% {
+    scale: 0.85 1.15;
+  }
+
+  50% {
+    translate: 0 0;
+    scale: 1.3 0.7;
+  }
+
+  60% {
+    scale: 0.95 1.05;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rkui-spinner--orbit .rkui-spinner-dot,
+  .rkui-spinner--triangle .rkui-spinner-dot,
+  .rkui-spinner--squash .rkui-spinner-dot {
+    animation: rkui-spinner-fade var(--rkui-loop-medium) ease-in-out infinite alternate;
+  }
+}

package/src/components/sticky-note/StickyNote.vue

@@ -0,0 +1,104 @@
+<!--
+  A card or a callout drawn as a sticky note: it renders `Card` or `Callout` with the sticky-note
+  classes added, so it takes their props and slots too (`title`, `href`, `meta`, `headingLevel` and
+  the `image` slot for a card; `kind` and `title` for a callout). A separate component rather than
+  a `note` prop on each, so Card and Callout stay free of it. The slot is the card's body or the
+  callout's text; the `image` slot is a card's image (`slot="image"` in Astro, `<template #image>`
+  in Vue). `class`, `style` and other attributes
+  go on the outer element.
+
+  @example
+  <StickyNote title="Remember" hue="grape" tilt hold="pin"><p>Bring the charger.</p></StickyNote>
+  <StickyNote as="callout" kind="warning" hold="tape"><p>Back up first.</p></StickyNote>
+  <StickyNote title="Lively" animated><p>The corner lifts on hover.</p></StickyNote>
+  <StickyNote title="Steeper" tilt style="--rkui-note-tilt: 4deg"><p>A custom tilt.</p></StickyNote>
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import Callout from '../callout/Callout.vue'
+import Card from '../card/Card.vue'
+import { hueVars, isHex } from '../../shared/hues'
+
+/**
+ * The colours a note comes in: the hues sticky-note.css has a paper colour for (every hue but
+ * navy and teal), or a hex code.
+ */
+type NoteHue =
+  'yellow' | 'sky' | 'tangerine' | 'green' | 'coral' | 'grape' | 'lilac' | 'apricot' | `#${string}`
+
+interface Props {
+  /** 'card' or 'callout'; 'card' when left out. A card needs a `title`, or the build stops. */
+  as?: 'card' | 'callout'
+  /**
+   * The note's colour, a hue or a hex code: yellow when left out, but sky for a note callout and
+   * tangerine for a warning one.
+   */
+  hue?: NoteHue
+  /** Turns the note slightly, by -2deg; set `--rkui-note-tilt` in `style` for another angle; upright when left out. */
+  tilt?: boolean
+  /** Lifts the folded corner on hover, as a linked note's does; a linked note always does; still when left out. */
+  animated?: boolean
+  /** How the note is held to the page: 'tape' or 'pin'; neither when left out. */
+  hold?: 'tape' | 'pin'
+  /** The card's title (required for a card) or the callout's bold first line; none when left out. */
+  title?: string
+  /** A card's link target; a static note when left out. */
+  href?: string
+  /** A card's short line under the title; none when left out. */
+  meta?: string
+  /** A card title's heading level; 3 when left out. */
+  headingLevel?: 2 | 3 | 4
+  /** A callout's kind, 'note' or 'warning'; 'note' when left out. */
+  kind?: 'note' | 'warning'
+}
+
+const {
+  as = 'card',
+  hue,
+  tilt,
+  animated,
+  hold,
+  title,
+  href,
+  meta,
+  headingLevel = 3,
+  kind = 'note',
+} = defineProps<Props>()
+
+/** The sticky-note classes, for whichever of Card or Callout is drawn. */
+const noteClasses = computed(() => [
+  'rkui-sticky-note',
+  hue && !isHex(hue) && `rkui-sticky-note--${hue}`,
+  hold && `rkui-sticky-note--${hold}`,
+  { 'rkui-sticky-note--tilt': tilt, 'rkui-sticky-note--animated': animated },
+])
+
+/** A hex colour's paper and text as custom properties; a hue sets them by its class. */
+const vars = computed(() =>
+  isHex(hue) ? hueVars(hue, { fill: '--rkui-note-fill', text: '--rkui-note-text' }) : {},
+)
+
+/** Throws, so the build stops, when a card has no title. */
+function cardTitle(): string {
+  if (!title) throw new Error('StickyNote: a card needs a `title` (or use as="callout")')
+  return title
+}
+</script>
+
+<template>
+  <Callout v-if="as === 'callout'" :class="noteClasses" :style="vars" :title="title" :kind="kind">
+    <slot />
+  </Callout>
+  <Card
+    v-else
+    :class="noteClasses"
+    :style="vars"
+    :title="cardTitle()"
+    :href="href"
+    :meta="meta"
+    :heading-level="headingLevel"
+  >
+    <template v-if="$slots.image" #image><slot name="image" /></template>
+    <slot />
+  </Card>
+</template>

package/src/components/sticky-note/sticky-note.css

@@ -0,0 +1,206 @@
+/* Sticky notes: a card or a callout drawn as a sticky note, with the outline, the hard shadow and
+   a folded bottom-left corner. Yellow by default; a note callout is sky and a warning tangerine,
+   and the hue modifiers set another (for any other colour, set --rkui-note-fill and
+   --rkui-note-text). Options: .rkui-sticky-note--tilt turns the note slightly (--rkui-note-tilt
+   sets the angle), .rkui-sticky-note--tape or --pin holds it to the page, and
+   .rkui-sticky-note--animated lifts the corner on hover. A linked card's corner lifts as it pops.
+
+   <article class="rkui-card rkui-card--link rkui-sticky-note">…</article>
+   <div class="rkui-callout rkui-callout--warning rkui-sticky-note rkui-sticky-note--tape"
+     role="note">…</div>
+   <article class="rkui-card rkui-sticky-note rkui-sticky-note--tilt"
+     style="--rkui-note-tilt: 1.5deg">…</article> */
+
+.rkui-sticky-note {
+  --rkui-note-fill: var(--rkui-note-yellow);
+  --rkui-note-text: var(--rkui-on-fill);
+  --rkui-shade-of: var(--rkui-note-fill);
+  --rkui-note-fold: var(--rkui-space-4);
+  --rkui-note-pin: var(--rkui-coral);
+  --rkui-icon-fill: var(--rkui-shade);
+
+  position: relative;
+  overflow: visible;
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  background: var(--rkui-note-fill);
+  color: var(--rkui-note-text);
+  box-shadow: var(--rkui-shadow);
+  /* Cuts the folded corner off along the fold, reaching far past the box elsewhere so the shadow,
+     the focus band and the tape aren't cut. The light falls along the fold by default, so the
+     shadow's own corner is cut on the same line. */
+  clip-path: polygon(
+    -100vmax -100vmax,
+    calc(100% + 100vmax) -100vmax,
+    calc(100% + 100vmax) calc(100% + 100vmax),
+    calc(var(--rkui-note-fold) + 100vmax) calc(100% + 100vmax),
+    -100vmax calc(100% - var(--rkui-note-fold) - 100vmax)
+  );
+}
+
+/* The fold's flap, the cut corner turned over onto the note. Its inner half is in the cut-off
+   corner, so only the flap shows: a hard-stop gradient draws the ink along the fold, and the
+   borders its two paper edges. Physical sides, like the clip. */
+.rkui-sticky-note::after {
+  content: '';
+  position: absolute;
+  bottom: calc(-1 * var(--rkui-outline-width));
+  left: calc(-1 * var(--rkui-outline-width));
+  box-sizing: border-box;
+  width: var(--rkui-note-fold);
+  height: var(--rkui-note-fold);
+  border: 0 solid var(--rkui-line);
+  border-top-width: var(--rkui-outline-width);
+  border-right-width: var(--rkui-outline-width);
+  background: linear-gradient(
+      to bottom left,
+      var(--rkui-shade) calc(50% - var(--rkui-outline-width)),
+      var(--rkui-line) 0
+    )
+    border-box;
+  pointer-events: none;
+}
+
+/* Ink text in both themes, so links and meta lines take it too. */
+:where(.rkui-sticky-note) a,
+.rkui-sticky-note .rkui-card-meta {
+  color: inherit;
+}
+
+.rkui-callout.rkui-sticky-note,
+.rkui-sticky-note .rkui-card-body {
+  padding: var(--rkui-space-5);
+}
+
+/* The note doesn't clip its content, so the card's image rounds its own top corners. */
+.rkui-sticky-note .rkui-card-image {
+  border-start-start-radius: calc(var(--rkui-radius) - var(--rkui-outline-width));
+  border-start-end-radius: calc(var(--rkui-radius) - var(--rkui-outline-width));
+  border-block-end: var(--rkui-outline-width) solid var(--rkui-line);
+}
+
+/* Prompts: callout kinds pick a colour; :where() lets a hue modifier override it. */
+.rkui-sticky-note:where(.rkui-callout--note) {
+  --rkui-note-fill: var(--rkui-note-sky);
+}
+
+.rkui-sticky-note:where(.rkui-callout--warning) {
+  --rkui-note-fill: var(--rkui-note-tangerine);
+}
+
+.rkui-sticky-note--yellow {
+  --rkui-note-fill: var(--rkui-note-yellow);
+}
+
+.rkui-sticky-note--sky {
+  --rkui-note-fill: var(--rkui-note-sky);
+}
+
+/* Tangerine focus bands vanish on tangerine, so focus inside uses the alternate. */
+.rkui-sticky-note--tangerine {
+  --rkui-note-fill: var(--rkui-note-tangerine);
+  --rkui-focus: var(--rkui-focus-alt);
+}
+
+.rkui-sticky-note--green {
+  --rkui-note-fill: var(--rkui-note-green);
+}
+
+.rkui-sticky-note--coral {
+  --rkui-note-fill: var(--rkui-note-coral);
+  --rkui-note-pin: var(--rkui-navy);
+}
+
+.rkui-sticky-note--grape {
+  --rkui-note-fill: var(--rkui-note-grape);
+}
+
+.rkui-sticky-note--lilac {
+  --rkui-note-fill: var(--rkui-note-lilac);
+}
+
+/* Tangerine focus bands vanish on apricot too. */
+.rkui-sticky-note--apricot {
+  --rkui-note-fill: var(--rkui-note-apricot);
+  --rkui-focus: var(--rkui-focus-alt);
+}
+
+/* The tilt turns the note's shadow with it, so the shadow's offset is turned back by the same
+   angle and still falls away from the light. A linked note pops with the usual shadows, which
+   turn with it, by under a quarter pixel at a slight tilt. */
+.rkui-sticky-note--tilt {
+  --rkui-note-tilt: -2deg;
+  --rkui-note-shadow-x: calc(
+    var(--rkui-shadow-offset-x) * cos(var(--rkui-note-tilt)) + var(--rkui-shadow-offset-y) *
+      sin(var(--rkui-note-tilt))
+  );
+  --rkui-note-shadow-y: calc(
+    var(--rkui-shadow-offset-y) * cos(var(--rkui-note-tilt)) - var(--rkui-shadow-offset-x) *
+      sin(var(--rkui-note-tilt))
+  );
+
+  rotate: var(--rkui-note-tilt);
+  box-shadow:
+    var(--rkui-note-shadow-x) var(--rkui-note-shadow-y) 0 var(--rkui-shadow-color),
+    var(--rkui-note-shadow-x) var(--rkui-note-shadow-y) 0 var(--rkui-outline-width)
+      var(--rkui-shadow-edge);
+}
+
+/* A strip of see-through tape across the top edge. */
+.rkui-sticky-note--tape::before {
+  content: '';
+  position: absolute;
+  inset-block-start: calc(var(--rkui-space-5) / -2);
+  inset-inline: 0;
+  inline-size: var(--rkui-space-7);
+  block-size: var(--rkui-space-5);
+  margin-inline: auto;
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  background: var(--rkui-note-tape);
+  pointer-events: none;
+}
+
+/* A pin's round head, just inside the top edge. */
+.rkui-sticky-note--pin::before {
+  content: '';
+  position: absolute;
+  inset-block-start: var(--rkui-space-2);
+  inset-inline: 0;
+  box-sizing: border-box;
+  inline-size: var(--rkui-space-4);
+  block-size: var(--rkui-space-4);
+  margin-inline: auto;
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-note-pin);
+  pointer-events: none;
+}
+
+/* A linked note's corner lifts with the pop and goes flat again when pressed. The transitions
+   repeat the pop's own from interactive.css, which this replaces. */
+.rkui-sticky-note.rkui-card--link {
+  transition:
+    translate var(--rkui-duration-fast) ease,
+    box-shadow var(--rkui-duration-fast) ease,
+    clip-path var(--rkui-duration-fast) ease;
+}
+
+/* An animated note lifts its corner on hover without being a link: the fold alone, no pop. */
+.rkui-sticky-note--animated:not(.rkui-card--link) {
+  transition: clip-path var(--rkui-duration-fast) ease;
+}
+
+.rkui-sticky-note:where(.rkui-card--link, .rkui-sticky-note--animated)::after {
+  transition:
+    width var(--rkui-duration-fast) ease,
+    height var(--rkui-duration-fast) ease;
+}
+
+@media (hover: hover) {
+  .rkui-sticky-note:where(.rkui-card--link, .rkui-sticky-note--animated):hover {
+    --rkui-note-fold: var(--rkui-space-5);
+  }
+}
+
+.rkui-sticky-note.rkui-card--link:active {
+  --rkui-note-fold: var(--rkui-space-4);
+}