@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/pagination/pagination.css

@@ -0,0 +1,87 @@
+/* Pagination, in two looks (open, see DECISIONS).
+
+   Folder tabs: the strip and the sheet are folder.css's. Page numbers stay upright when the strip
+   stands on a side.
+
+   Tiles: page links as round tiles, with the current page's pushed in, between Previous and Next
+   buttons, above the content or below it (--bottom). The tiles take what room the buttons leave,
+   centred, as a scroll region for when they don't fit. The words in the buttons are in
+   .rkui-pagination-word, so the small size can leave just the carets:
+   <div class="rkui-pagination-tiles rkui-pagination-tiles--collapse">
+     <nav class="rkui-pagination" aria-label="Pagination">
+       <a class="rkui-button rkui-button--small" href="?page=1" rel="prev">
+         <svg …></svg> <span class="rkui-pagination-word">Previous</span>
+       </a>
+       <div class="rkui-pagination-pages">
+         <ol class="rkui-tiles rkui-tiles--compact rkui-scroll">
+           <li class="rkui-strip-item"><a class="rkui-tile" href="?page=1">1</a></li>
+           <li class="rkui-strip-item"><a class="rkui-tile" href="?page=2" aria-current="page">2</a></li>
+           <li>…</li>
+           <li class="rkui-strip-item"><a class="rkui-tile" href="?page=9">9</a></li>
+         </ol>
+       </div>
+       <a class="rkui-button rkui-button--small" href="?page=3" rel="next">
+         <span class="rkui-pagination-word">Next</span> <svg …></svg>
+       </a>
+     </nav>
+     <div>…</div>
+   </div>
+
+   With collapse, folder-enhance.js shows as many pages as fit in either look (folder.css); without
+   it the pages scroll. */
+
+.rkui-pagination-number {
+  writing-mode: horizontal-tb;
+}
+
+/* On the sides, an upright number's tab is about square, and as wide as the step tabs. */
+:is(.rkui-folder--left, .rkui-folder--right)
+  > .rkui-folder-strip
+  .rkui-folder-tab:has(> .rkui-pagination-number) {
+  padding-inline: var(--rkui-space-2);
+}
+
+:is(.rkui-folder--left, .rkui-folder--right) > .rkui-folder-strip .rkui-pagination-number {
+  min-inline-size: 1.25rem;
+  text-align: center;
+}
+
+.rkui-pagination-tiles {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--rkui-space-4);
+}
+
+.rkui-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--rkui-space-3);
+}
+
+/* The tiles take the room the buttons leave. */
+.rkui-pagination-pages {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+/* Room inside the scroll region for the focus band and the tiles' shadows. */
+.rkui-pagination-pages > ol {
+  flex-wrap: nowrap;
+  justify-content: safe center;
+  padding: var(--rkui-space-2) calc(var(--rkui-shadow-depth) * var(--rkui-space-2));
+  list-style: none;
+}
+
+.rkui-pagination .rkui-tile {
+  text-decoration: none;
+}
+
+/* At the small size the buttons keep their carets, and their words stay for screen readers. */
+.rkui-pagination:has(> .rkui-pagination-pages > [data-rkui-small]) .rkui-pagination-word {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/components/popup/Popup.vue

@@ -0,0 +1,26 @@
+<!--
+  A small raised panel that a button opens with the browser's Popover API, for a toggletip or a few
+  controls, with no JavaScript. The slot is the panel's content. Give the opening button
+  `popovertarget` set to this `id`; a button inside can close it with
+  `popovertargetaction="hide"`. `class`, `style` and other attributes go on the panel. Safari 18
+  opens it in the middle of the window rather than under its button, and Safari and Firefox close
+  it at once, without the fade.
+
+  @example
+  <Button popovertarget="filter-popup">Filter</Button>
+  <Popup id="filter-popup"><p>Filter options.</p></Popup>
+-->
+<script setup lang="ts">
+interface Props {
+  /** The panel's id, which the button's `popovertarget` names. */
+  id: string
+}
+
+const { id } = defineProps<Props>()
+</script>
+
+<template>
+  <div :id class="rkui-popup" popover>
+    <slot />
+  </div>
+</template>

package/src/components/popup/popup.css

@@ -0,0 +1,53 @@
+/* Popup: a small raised panel that a button opens with the Popover API, for a toggletip or a few
+   controls. The browser opens and closes it, closes it on Escape or a click outside, and returns
+   focus to the button. Where CSS anchor positioning is supported it opens under its button and
+   flips to stay on screen; elsewhere it opens in the middle of the viewport.
+
+   <button class="rkui-button" popovertarget="filter-popup">Filter</button>
+   <div class="rkui-popup" id="filter-popup" popover>…</div> */
+
+.rkui-popup {
+  box-sizing: border-box;
+  max-inline-size: min(20rem, 100vw - 2 * var(--rkui-space-4));
+  padding: var(--rkui-space-4);
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-raised);
+  color: var(--rkui-fg);
+  box-shadow: var(--rkui-shadow);
+  transition:
+    opacity var(--rkui-duration-spring) ease,
+    scale var(--rkui-duration-spring) var(--rkui-ease-snap),
+    display var(--rkui-duration-spring) allow-discrete,
+    overlay var(--rkui-duration-spring) allow-discrete;
+}
+
+.rkui-popup > :first-child {
+  margin-block-start: 0;
+}
+
+.rkui-popup > :last-child {
+  margin-block-end: 0;
+}
+
+.rkui-popup[popover]:not(:popover-open) {
+  opacity: 0;
+  scale: 0.9;
+}
+
+@starting-style {
+  .rkui-popup:popover-open {
+    opacity: 0;
+    scale: 0.9;
+  }
+}
+
+/* The button that opens a popover is its anchor, so no anchor-name is needed. */
+@supports (position-area: block-end) {
+  .rkui-popup {
+    inset: auto;
+    margin: var(--rkui-space-2) 0;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block, flip-inline;
+  }
+}

package/src/components/progress/Progress.vue

@@ -0,0 +1,47 @@
+<!--
+  A progress bar on the native `<progress>`, inside a `<label>` that holds its visible label.
+  Striped by default; without a `value` it is indeterminate. `class` and other attributes go on the
+  `<progress>`.
+
+  @example
+  <Progress label="Uploading" :value="65" hue="teal" />
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { hueVars, type HueOrHex } from '../../shared/hues'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The bar's visible label, which is also its accessible name. */
+  label: string
+  /** How far along, from 0 to `max`; an indeterminate bar when left out. */
+  value?: number
+  /** The full value; 100 when left out. */
+  max?: number
+  /** A plain fill instead of stripes; striped when left out. Open, see DECISIONS ("Loading"). */
+  flat?: boolean
+  /** The bar's colour, a hue or a hex code; the selected colour when left out. */
+  hue?: HueOrHex
+}
+
+const { label, value, max = 100, flat, hue } = defineProps<Props>()
+
+/** The bar's colour as a custom property, when `hue` is set. */
+const vars = computed(() => hueVars(hue, { fill: '--rkui-progress-fill' }))
+</script>
+
+<template>
+  <label class="rkui-field">
+    {{ label }}
+    <progress
+      :class="['rkui-progress', { 'rkui-progress--flat': flat }]"
+      :style="vars"
+      :max="value === undefined ? undefined : max"
+      :value="value"
+      v-bind="$attrs"
+    >
+      <template v-if="value !== undefined">{{ Math.round((value / max) * 100) }}%</template>
+    </progress>
+  </label>
+</template>

package/src/components/progress/progress.css

@@ -0,0 +1,170 @@
+/* Progress bar and meter on the native elements, drawn as a pill track like the range slider's.
+   The track is the element itself; WebKit and Firefox name the fill differently, so each fill is
+   styled twice. The fill is striped; add .rkui-progress--flat for a plain one. A <progress>
+   without a value is indeterminate: the stripes roll along the whole track, or on a flat bar a
+   block slides along it.
+
+   <label class="rkui-field">Uploading <progress class="rkui-progress" max="100"
+     value="40">40%</progress></label>
+   <label class="rkui-field">Loading <progress class="rkui-progress"></progress></label>
+   <label class="rkui-field">Disk <meter class="rkui-meter" min="0" max="1" low="0.6" high="0.85"
+     optimum="0.2" value="0.7"></meter></label> */
+
+.rkui-progress,
+.rkui-meter {
+  --rkui-progress-track: var(--rkui-raised);
+
+  appearance: none;
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: 30rem;
+  block-size: 0.875rem;
+  overflow: hidden;
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-progress-track);
+}
+
+.rkui-progress {
+  --rkui-progress-fill: var(--rkui-selected);
+  --rkui-stripe-size: 1rem;
+  --rkui-stripes: linear-gradient(
+    45deg,
+    var(--rkui-stripe) 25%,
+    transparent 0 50%,
+    var(--rkui-stripe) 0 75%,
+    transparent 0
+  );
+}
+
+.rkui-progress::-webkit-progress-bar {
+  background: transparent;
+}
+
+/* The fill's leading edge gets the outline, so it reads as a solid block against the track. */
+.rkui-progress::-webkit-progress-value {
+  border-inline-end: var(--rkui-outline-width) solid var(--rkui-line);
+  background:
+    var(--rkui-stripes) 0 0 / var(--rkui-stripe-size) var(--rkui-stripe-size),
+    var(--rkui-progress-fill);
+}
+
+.rkui-progress::-moz-progress-bar {
+  border-inline-end: var(--rkui-outline-width) solid var(--rkui-line);
+  background:
+    var(--rkui-stripes) 0 0 / var(--rkui-stripe-size) var(--rkui-stripe-size),
+    var(--rkui-progress-fill);
+}
+
+.rkui-progress--flat::-webkit-progress-value {
+  background: var(--rkui-progress-fill);
+}
+
+.rkui-progress--flat::-moz-progress-bar {
+  background: var(--rkui-progress-fill);
+}
+
+/* Indeterminate: the fills are hidden and the track's own background moves. */
+.rkui-progress:indeterminate::-webkit-progress-value {
+  background: transparent;
+}
+
+.rkui-progress:indeterminate::-moz-progress-bar {
+  background: transparent;
+}
+
+.rkui-progress:indeterminate {
+  background:
+    var(--rkui-stripes) 0 0 / var(--rkui-stripe-size) var(--rkui-stripe-size),
+    var(--rkui-progress-fill);
+  animation: rkui-progress-stripes var(--rkui-loop-quick) linear infinite;
+}
+
+.rkui-progress--flat:indeterminate {
+  background: linear-gradient(var(--rkui-progress-fill) 0 0) 0 0 / 35% 100% no-repeat
+    var(--rkui-progress-track);
+  animation: rkui-progress-slide var(--rkui-loop-steady) ease-in-out infinite alternate;
+}
+
+@keyframes rkui-progress-stripes {
+  to {
+    background-position-x: var(--rkui-stripe-size);
+  }
+}
+
+@keyframes rkui-progress-slide {
+  to {
+    background-position-x: 100%;
+  }
+}
+
+/* Meter: the fill's colour says whether the value is in the good, middling or bad range. */
+.rkui-meter::-webkit-meter-bar {
+  border: 0;
+  background: transparent;
+}
+
+.rkui-meter::-webkit-meter-optimum-value {
+  border-inline-end: var(--rkui-outline-width) solid var(--rkui-line);
+  background: var(--rkui-green);
+}
+
+.rkui-meter::-webkit-meter-suboptimum-value {
+  border-inline-end: var(--rkui-outline-width) solid var(--rkui-line);
+  background: var(--rkui-yellow);
+}
+
+.rkui-meter::-webkit-meter-even-less-good-value {
+  border-inline-end: var(--rkui-outline-width) solid var(--rkui-line);
+  background: var(--rkui-coral);
+}
+
+.rkui-meter::-moz-meter-bar {
+  border-inline-end: var(--rkui-outline-width) solid var(--rkui-line);
+  background: var(--rkui-green);
+}
+
+.rkui-meter:-moz-meter-sub-optimum::-moz-meter-bar {
+  background: var(--rkui-yellow);
+}
+
+.rkui-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  background: var(--rkui-coral);
+}
+
+/* Under reduced motion, an indeterminate bar stays still and fades in and out instead, like the
+   spinners (rkui-spinner-fade, spinner.css). */
+@media (prefers-reduced-motion: reduce) {
+  .rkui-progress:indeterminate {
+    animation: rkui-spinner-fade var(--rkui-loop-medium) ease-in-out infinite alternate;
+  }
+
+  .rkui-progress--flat:indeterminate {
+    background-size: 100% 100%;
+  }
+}
+
+/* Forced colours drop the fills and background images, so the fills use system colours. */
+@media (forced-colors: active) {
+  .rkui-progress,
+  .rkui-meter {
+    --rkui-progress-track: Canvas;
+    --rkui-progress-fill: Highlight;
+    --rkui-stripe: Canvas;
+
+    forced-color-adjust: none;
+    border-color: CanvasText;
+  }
+
+  .rkui-meter::-webkit-meter-optimum-value,
+  .rkui-meter::-webkit-meter-suboptimum-value,
+  .rkui-meter::-webkit-meter-even-less-good-value {
+    background: Highlight;
+  }
+
+  .rkui-meter::-moz-meter-bar,
+  .rkui-meter:-moz-meter-sub-optimum::-moz-meter-bar,
+  .rkui-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: Highlight;
+  }
+}

package/src/components/quote/Quote.vue

@@ -0,0 +1,48 @@
+<!--
+  An rkui quote: a `<blockquote>` on a panel, in the slab serif, as wide as the column it sits
+  in, its edges in line with the text around it. The slot is the quoted text. With `by` it is a
+  `<figure>` with the attribution in a `<figcaption>` under the quote, since an attribution belongs
+  outside the `<blockquote>`. `class`, `style` and other attributes go on the outer element. It
+  needs no JavaScript; with the helper script quote-enhance.js, a quote whose text is one line
+  long in its column is set two steps larger, and one of two lines a step larger. A Markdown `>`
+  quote renders as one where the page maps it: `<Content components={{ blockquote: Quote }} />`
+  in Astro, or `export const components = { blockquote: Quote }` in an MDX file.
+
+  @example
+  <Quote by="Ada Lovelace"><p>The Analytical Engine weaves algebraic patterns.</p></Quote>
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  /** Who said it, shown under the quote after a dash; none when left out. */
+  by?: string
+  /**
+   * 'italic' slants the quote (the browser slants Roboto Slab, which has no italic); 'upright'
+   * when left out.
+   */
+  slant?: 'upright' | 'italic'
+  /**
+   * Sets the quote two steps larger, as a one-line quote is, whatever its length; when left out,
+   * the helper script sizes it by its length.
+   */
+  short?: boolean
+}
+
+const { by, slant = 'upright', short = false } = defineProps<Props>()
+
+const classes = computed(() => [
+  'rkui-quote',
+  { 'rkui-quote--italic': slant === 'italic', 'rkui-quote--short': short },
+])
+</script>
+
+<template>
+  <figure v-if="by" :class="classes">
+    <blockquote><slot /></blockquote>
+    <figcaption class="rkui-quote-by">{{ by }}</figcaption>
+  </figure>
+  <blockquote v-else :class="classes">
+    <slot />
+  </blockquote>
+</template>

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

@@ -0,0 +1,70 @@
+// Marks a quote whose text is under three lines long, at the normal size, with data-rkui-short:
+// "one" for a single line, which quote.css sets two steps larger, "two" for the rest, a step
+// larger. It is measured at the normal size every time, so the larger size never feeds back into
+// the count. It is checked again when the quote's size changes (one shared ResizeObserver) or its
+// text changes (one shared MutationObserver), including in a Vue app. Without this script every
+// quote keeps the normal size.
+import { eachElement } from '../../shared/each-element.js'
+
+const SHORT = 'data-rkui-short'
+
+/** Quotes whose size changed, checked together in the next frame. */
+const pending = new Set()
+
+/** The element's line height in pixels: about 1.2 times its font size where it is `normal`. */
+function lineHeight(element) {
+  const style = getComputedStyle(element)
+  return parseFloat(style.lineHeight) || 1.2 * parseFloat(style.fontSize)
+}
+
+/**
+ * Sets or clears the quote's mark. The quote is measured with the mark off, and the mark is set
+ * again before the page paints, so it never shows the wrong size. A quote that isn't shown (in a
+ * closed tab) is left as it is until it is.
+ * @param {HTMLElement} quote
+ */
+function check(quote) {
+  if (quote.getClientRects().length === 0) return
+  quote.removeAttribute(SHORT)
+  const text = quote.matches('figure') ? quote.querySelector(':scope > blockquote') : quote
+  const range = document.createRange()
+  range.selectNodeContents(text)
+  const lines = range.getBoundingClientRect().height / lineHeight(text)
+  // Under three lines' height: two lines with a paragraph gap between them still count.
+  if (lines < 1.5) quote.setAttribute(SHORT, 'one')
+  else if (lines < 2.75) quote.setAttribute(SHORT, 'two')
+}
+
+// A size change is checked in the next frame, not in the observer's callback, where changing the
+// quote's height would make the browser report a ResizeObserver loop. A check that changes the
+// size leads to one more check, which finds the same answer, so it settles.
+const resizes = new ResizeObserver((entries) => {
+  if (pending.size === 0) {
+    requestAnimationFrame(() => {
+      for (const quote of pending) check(quote)
+      pending.clear()
+    })
+  }
+  for (const { target } of entries) pending.add(target)
+})
+
+// A text change is checked at once, before the page paints.
+const edits = new MutationObserver((records) => {
+  const changed = new Set()
+  for (const { target } of records) {
+    const element = target instanceof Element ? target : target.parentElement
+    // The quote the text is in, and any quote around that one
+    let quote = element?.closest('.rkui-quote')
+    while (quote) {
+      changed.add(quote)
+      quote = quote.parentElement?.closest('.rkui-quote')
+    }
+  }
+  for (const quote of changed) check(quote)
+})
+
+eachElement('.rkui-quote', 'data-rkui-quote-watched', (quote) => {
+  check(quote)
+  resizes.observe(quote)
+  edits.observe(quote, { childList: true, characterData: true, subtree: true })
+})

package/src/components/quote/quote.css

@@ -0,0 +1,73 @@
+/* Quote: a static panel holding quoted text in the slab serif. It fills the column's width
+   with no indent, so its edges line up with the text around it, and keeps the same space above
+   and below whatever its length. A quote inside a quote sits on the panel tab, a step darker.
+
+   <blockquote class="rkui-quote"><p>Quoted text.</p></blockquote>
+
+   With an attribution:
+
+   <figure class="rkui-quote">
+     <blockquote><p>Quoted text.</p></blockquote>
+     <figcaption class="rkui-quote-by">Who said it</figcaption>
+   </figure>
+
+   Opt-in modifier: .rkui-quote--italic slants the quote. Roboto Slab has no italic, so the browser
+   slants the upright letters; emphasis inside turns upright.
+
+   quote-enhance.js marks a quote whose text is under three lines at this size with
+   data-rkui-short: a single line is set two steps larger, two lines a step larger.
+   .rkui-quote--short sets it two steps larger whatever its length. */
+
+.rkui-quote {
+  margin: var(--rkui-space-5) 0;
+  padding: var(--rkui-space-4);
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-panel);
+  color: var(--rkui-fg);
+  font-family: var(--rkui-font-display);
+  font-weight: 400;
+}
+
+/* The quote's paragraphs, or in a figure its blockquote and attribution */
+.rkui-quote > *,
+.rkui-quote > blockquote > * {
+  margin: 0 0 var(--rkui-space-3);
+}
+
+.rkui-quote > :last-child,
+.rkui-quote > blockquote > :last-child {
+  margin-block-end: 0;
+}
+
+/* Its padding and margins are in rem, so a short quote keeps the same space around it. */
+.rkui-quote[data-rkui-short='two'] {
+  font-size: var(--rkui-step-1);
+}
+
+.rkui-quote[data-rkui-short='one'],
+.rkui-quote.rkui-quote--short {
+  font-size: var(--rkui-step-2);
+}
+
+.rkui-quote .rkui-quote {
+  background: var(--rkui-panel-tab);
+}
+
+.rkui-quote-by {
+  color: var(--rkui-muted);
+  font-family: var(--rkui-font-body);
+  font-size: var(--rkui-step--1);
+  font-style: normal;
+}
+
+.rkui-quote-by::before {
+  content: '— ';
+}
+
+.rkui-quote--italic {
+  font-style: italic;
+}
+
+.rkui-quote--italic em {
+  font-style: normal;
+}