@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/ballot/ballot.css

@@ -0,0 +1,208 @@
+/* Ballot: a column of options, each a tile (tiles.css) beside a bordered text box. Each row is one
+   label, so clicking anywhere on it votes. Use radios for one choice, checkboxes for several.
+   Hovering or pressing the row pops its tile; the checked row's tile is pushed in and its text box
+   takes --rkui-selected-tint. The checked tile lands with a kerchunk.
+
+   <fieldset class="rkui-ballot">
+     <legend class="rkui-visually-hidden">Vote</legend>
+     <label class="rkui-ballot-option">
+       <span class="rkui-tile"><input type="radio" name="vote" value="a"> A</span>
+       <span class="rkui-ballot-text"><strong>Title</strong> <span>Optional longer
+         text</span></span>
+     </label>
+     …
+   </fieldset>
+
+   The tile holds the input, so it can be left empty or hold a letter, a number, an icon
+   (<svg aria-hidden="true">) or a colour (.rkui-tile--color, color-picker.css). Its content is part
+   of the option's name; wrap it in <span aria-hidden="true"> if it shouldn't be.
+
+   The checked box's colour is --rkui-selected-tint. Set it on the group or on one option to match a
+   colour tile or an icon: <label class="rkui-ballot-option" style="--rkui-selected-tint:
+   var(--rkui-teal-tint)">.
+
+   Layout modifiers for the group, which combine freely:
+     .rkui-ballot--mark-end  the tiles on the right;
+     .rkui-ballot--overlap   each tile straddles its text box's edge;
+     .rkui-ballot--inside    each tile sits inside its text box;
+     .rkui-ballot--tight     no gap between rows, so the boxes read as one ruled list. */
+
+.rkui-ballot {
+  --rkui-tile-size: 2.5rem;
+  --rkui-tile-font-size: var(--rkui-step-1);
+
+  display: grid;
+  gap: var(--rkui-space-3);
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.rkui-ballot-option {
+  display: flex;
+  align-items: center;
+  gap: var(--rkui-space-3);
+  cursor: pointer;
+}
+
+/* The layouts place the checked tile, which is pushed in by the shadow offset. A tile at rest
+   sits back by that offset, so it's the checked tile that's centred on its row and edges. */
+.rkui-ballot .rkui-tile {
+  inset-block-start: calc(-1 * var(--rkui-shadow-offset-y));
+}
+
+.rkui-ballot--mark-end .rkui-ballot-option {
+  flex-direction: row-reverse;
+}
+
+.rkui-ballot--mark-end .rkui-tile {
+  margin-inline-end: var(--rkui-shadow-offset-x);
+}
+
+.rkui-ballot-option:has(:disabled) {
+  cursor: not-allowed;
+}
+
+.rkui-ballot-text {
+  display: grid;
+  flex: 1;
+  gap: var(--rkui-space-1);
+  min-inline-size: 0;
+  padding: var(--rkui-space-2) var(--rkui-space-3);
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-raised);
+  transition: background-color var(--rkui-duration-spring) ease;
+}
+
+.rkui-ballot-option:has(:checked) > .rkui-ballot-text {
+  background: var(--rkui-selected-tint);
+}
+
+@media (forced-colors: active) {
+  .rkui-ballot-option:has(:checked) > .rkui-ballot-text {
+    border-color: Highlight;
+  }
+}
+
+/* Overlap: a negative margin pulls the text box half under the tile, and the box pads its text
+   clear of it. The tile is positioned (tiles.css), so it paints above the box. */
+.rkui-ballot--overlap .rkui-ballot-option {
+  gap: 0;
+}
+
+.rkui-ballot--overlap .rkui-tile {
+  margin-inline-end: calc(var(--rkui-shadow-offset-x) - var(--rkui-tile-size) / 2);
+}
+
+.rkui-ballot--overlap .rkui-ballot-text {
+  padding-inline-start: calc(var(--rkui-tile-size) / 2 + var(--rkui-space-3));
+}
+
+.rkui-ballot--overlap.rkui-ballot--mark-end .rkui-tile {
+  margin-inline: calc(-1 * (var(--rkui-shadow-offset-x) + var(--rkui-tile-size) / 2))
+    var(--rkui-shadow-offset-x);
+}
+
+.rkui-ballot--overlap.rkui-ballot--mark-end .rkui-ballot-text {
+  padding-inline: var(--rkui-space-3) calc(var(--rkui-tile-size) / 2 + var(--rkui-space-3));
+}
+
+/* Inside: the same pull, the whole tile's width plus --rkui-tile-inset, so the tile sits in the
+   box's padding. The tile is top-aligned and the box is at least a tile tall, so one-line text is
+   centred against the tile and longer text starts level with it. */
+.rkui-ballot--inside {
+  --rkui-tile-inset: calc(var(--rkui-outline-width) + var(--rkui-space-3));
+}
+
+.rkui-ballot--inside .rkui-ballot-option {
+  align-items: start;
+  gap: 0;
+}
+
+.rkui-ballot--inside .rkui-tile {
+  margin-block-start: calc(var(--rkui-outline-width) + var(--rkui-space-2));
+  margin-inline: calc(var(--rkui-tile-inset) - var(--rkui-shadow-offset-x))
+    calc(var(--rkui-shadow-offset-x) - var(--rkui-tile-size) - var(--rkui-tile-inset));
+}
+
+.rkui-ballot--inside .rkui-ballot-text {
+  align-content: center;
+  min-block-size: calc(
+    var(--rkui-tile-size) + 2 * (var(--rkui-space-2) + var(--rkui-outline-width))
+  );
+  padding-inline-start: calc(var(--rkui-tile-size) + 2 * var(--rkui-space-3));
+}
+
+.rkui-ballot--inside.rkui-ballot--mark-end .rkui-tile {
+  margin-inline: calc(
+      -1 * (var(--rkui-tile-size) + var(--rkui-tile-inset) + var(--rkui-shadow-offset-x))
+    )
+    calc(var(--rkui-tile-inset) + var(--rkui-shadow-offset-x));
+}
+
+.rkui-ballot--inside.rkui-ballot--mark-end .rkui-ballot-text {
+  padding-inline: var(--rkui-space-3) calc(var(--rkui-tile-size) + 2 * var(--rkui-space-3));
+}
+
+/* Tight: each row after the first moves up by a border's width, so neighbouring boxes share one
+   edge, and only the outer corners stay round. Each box fills its row's height. The checked row,
+   then the focused one, is raised so its border and the tile's focus band sit above its
+   neighbours. */
+.rkui-ballot--tight {
+  gap: 0;
+}
+
+.rkui-ballot--tight .rkui-ballot-option {
+  position: relative;
+}
+
+.rkui-ballot--tight .rkui-ballot-option + .rkui-ballot-option {
+  margin-block-start: calc(-1 * var(--rkui-outline-width));
+}
+
+.rkui-ballot--tight .rkui-ballot-option:has(:checked) {
+  z-index: 1;
+}
+
+.rkui-ballot--tight
+  .rkui-ballot-option:has(:focus-visible, :where([data-rkui-focus-visible]):focus) {
+  z-index: 2;
+}
+
+.rkui-ballot--tight .rkui-ballot-text {
+  align-self: stretch;
+  align-content: center;
+}
+
+.rkui-ballot--tight .rkui-ballot-option:not(:first-of-type) > .rkui-ballot-text {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.rkui-ballot--tight .rkui-ballot-option:not(:last-of-type) > .rkui-ballot-text {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/* A tile that isn't inside its box keeps room above and below for its push-in, which makes the
+   row a little taller than one line of text. max(y, -y) is the size of the move whichever way
+   the light falls. */
+.rkui-ballot--tight:not(.rkui-ballot--inside) .rkui-tile {
+  margin-block: max(var(--rkui-shadow-offset-y), -1 * var(--rkui-shadow-offset-y));
+}
+
+/* A checked tile lands with the deck keys' kerchunk (segmented.css): it drives past its pushed-in
+   depth, then settles. The keyframes move it, so its translate isn't transitioned as well.
+   :user-valid only matches once the reader has changed the input, so a row checked when the page
+   loads, or by a script, doesn't play it. */
+.rkui-ballot .rkui-tile:has(:checked:enabled) {
+  transition-property: box-shadow;
+}
+
+.rkui-ballot .rkui-tile:has(:checked:user-valid) {
+  --rkui-key-overshoot: calc(var(--rkui-shadow-depth) * 2px);
+
+  animation: rkui-deck-key-in var(--rkui-duration-spring) ease-out;
+}

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,47 @@
+<!--
+  Breadcrumbs: the trail of pages leading to this one, in a `<nav>` with an ordered list. The last
+  item is the current page, marked `aria-current="page"`. `class`, `style` and other attributes go
+  on the `<nav>`.
+
+  @example
+  <Breadcrumbs :items="[{ label: 'Home', href: '/' }, { label: 'Docs', href: '/docs/' }]" />
+-->
+<script setup lang="ts">
+interface Item {
+  label: string
+  href: string
+}
+
+interface Props {
+  /** The trail, each a label and the link's href. */
+  items: Item[]
+  /**
+   * The look: 'chips' (each link a chip) or 'path' (one pill frame with slashes between the
+   * links); 'plain' links when left out. Open, see DECISIONS ("Breadcrumbs").
+   */
+  variant?: 'plain' | 'chips' | 'path'
+  /** The nav's accessible name; "Breadcrumb" when left out. */
+  label?: string
+}
+
+const { items, variant = 'plain', label = 'Breadcrumb' } = defineProps<Props>()
+</script>
+
+<template>
+  <nav
+    :class="['rkui-breadcrumbs', { 'rkui-breadcrumbs--path': variant === 'path' }]"
+    :aria-label="label"
+  >
+    <ol>
+      <li v-for="(item, i) in items" :key="i">
+        <a
+          :class="variant === 'chips' ? 'rkui-chip' : undefined"
+          :href="item.href"
+          :aria-current="i === items.length - 1 ? 'page' : undefined"
+        >
+          {{ item.label }}
+        </a>
+      </li>
+    </ol>
+  </nav>
+</template>

package/src/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,104 @@
+/* Breadcrumbs: the trail of pages leading to this one. The last link is the current page, marked
+   with aria-current="page". The separators are drawn here, so screen readers don't read them.
+
+   <nav class="rkui-breadcrumbs" aria-label="Breadcrumb">
+     <ol>
+       <li><a href="/">Home</a></li>
+       <li><a href="/section/">Section</a></li>
+       <li><a href="/section/page/" aria-current="page">Page</a></li>
+     </ol>
+   </nav>
+
+   Put .rkui-chip on each link for a trail of chips, or add .rkui-breadcrumbs--path to the nav for a
+   path bar: one pill frame with slashes between the links. */
+
+.rkui-breadcrumbs ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--rkui-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.rkui-breadcrumbs li {
+  display: flex;
+  align-items: center;
+  gap: var(--rkui-space-2);
+}
+
+/* A caret the shape of icons/caret-right.svg. */
+.rkui-breadcrumbs li + li::before {
+  content: '';
+  flex: none;
+  inline-size: 0.75em;
+  block-size: 0.75em;
+  background: var(--rkui-muted);
+  clip-path: polygon(25% 10%, 75% 50%, 25% 90%);
+}
+
+/* :where() keeps this below the chip's own current-page fill. */
+.rkui-breadcrumbs :where([aria-current='page']) {
+  color: var(--rkui-fg);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.rkui-breadcrumbs--path ol {
+  display: inline-flex;
+  gap: var(--rkui-space-1);
+  padding: var(--rkui-space-1);
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-raised);
+}
+
+.rkui-breadcrumbs--path li {
+  gap: var(--rkui-space-1);
+}
+
+.rkui-breadcrumbs--path li + li::before {
+  inline-size: var(--rkui-outline-width);
+  block-size: 1em;
+  clip-path: none;
+  rotate: 20deg;
+}
+
+.rkui-breadcrumbs--path a {
+  padding: var(--rkui-space-1) var(--rkui-space-3);
+  border-radius: var(--rkui-radius-pill);
+  color: var(--rkui-fg);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.rkui-breadcrumbs--path a:hover {
+  box-shadow: inset 0 0 0 var(--rkui-outline-width) var(--rkui-line-unfilled);
+}
+
+.rkui-breadcrumbs--path a[aria-current='page'] {
+  background: var(--rkui-section, var(--rkui-ink));
+  color: var(--rkui-on-section, var(--rkui-on-ink));
+}
+
+/* The marker-pen focus (base.css) wins over the current page's fill. */
+.rkui-breadcrumbs--path a:focus-visible {
+  background: var(--rkui-focus);
+  color: var(--rkui-ink);
+}
+
+/* Forced colours replace the separators' background with the page colour, which would hide
+   them, and drop the current page's fill. */
+@media (forced-colors: active) {
+  .rkui-breadcrumbs li + li::before {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+
+  .rkui-breadcrumbs--path a[aria-current='page'] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+}

package/src/components/button/Button.vue

@@ -0,0 +1,130 @@
+<!--
+  An rkui button: a `<button>`, or an `<a>` styled as one when `href` is given. The slot is the
+  label, after an optional icon. `class`, `style` and other attributes go on the element (`<a>` ones
+  for a link, `<button>` ones otherwise).
+
+  With `toggle` it is a button that stays pushed in while it is on: a `<label>` styled as a button,
+  holding a visually hidden checkbox, so it works with no JavaScript. Screen readers hear a
+  checkbox. `class` and `style` go on the label; other attributes (name, disabled, ...) go on the
+  checkbox. A toggle ignores `busy`, `water`, `href` and `type`. In a `.vue` file, `v-model` is
+  whether it is on. With `v-model`, the parent's value is
+  the starting value; `checked` applies only without one.
+
+  @example
+  <Button hue="teal">Save</Button>
+  <Button hue="#ff8800">Custom</Button>
+  <Button toggle small>Pause</Button>
+-->
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { vLiveChecked } from '../../shared/live-value'
+import { hueVars, isHex, type HueOrHex } from '../../shared/hues'
+import { splitAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /**
+   * The fill: a palette hue, a hex code, or 'section' for the section's colour; yellow when left
+   * out.
+   */
+  hue?: HueOrHex | 'section'
+  /** The outline-only secondary style; filled when left out. */
+  unfilled?: boolean
+  /** The small size; the regular size when left out. */
+  small?: boolean
+  /** Where a link goes; a <button> when left out. */
+  href?: string
+  /**
+   * Starts the button busy: `aria-busy` and `aria-disabled` (it stays focusable) and rising and
+   * falling water; not busy when left out. Say what is happening in the label.
+   */
+  busy?: boolean
+  /**
+   * Includes the water without starting busy, for a script that sets `aria-busy` later; only a busy
+   * button has it when left out.
+   */
+  water?: boolean
+  /** A fixed water level from 0 to 1; rising and falling when left out. */
+  level?: number
+  /** A button's type; 'button' when left out. Ignored for a link. */
+  type?: 'button' | 'submit' | 'reset'
+  /** A button that stays pushed in while it is on, holding a checkbox; a plain button when left out. */
+  toggle?: boolean
+  /** With `toggle`, starts on; off when left out. */
+  checked?: boolean
+}
+
+const {
+  hue,
+  unfilled,
+  small,
+  href,
+  busy,
+  water,
+  level,
+  type = 'button',
+  toggle,
+  checked,
+} = defineProps<Props>()
+
+/**
+ * With `toggle`, whether it is on (`v-model`); `checked` when left out.
+ */
+// The undefined default stops Vue reading a missing model as false.
+const on = defineModel<boolean | undefined>({ default: undefined })
+if (on.value === undefined) on.value = checked
+const attrs = useAttrs()
+
+/** The button's classes, for its hue, style and size. */
+const classes = computed(() => [
+  'rkui-button',
+  hue && !isHex(hue) && `rkui-button--${hue}`,
+  { 'rkui-button--unfilled': unfilled, 'rkui-button--small': small },
+])
+
+/** The custom properties that are set: a hex fill and its label, and the water level. */
+const vars = computed(() => ({
+  ...(isHex(hue) ? hueVars(hue, { fill: '--rkui-button-fill', text: '--rkui-button-label' }) : {}),
+  ...(level === undefined ? {} : { '--rkui-water-level': level }),
+}))
+
+/**
+ * The page's attributes, for a toggle: `class` and `style` for the label (`outer`), the rest for
+ * the checkbox. A plain button or link takes them all.
+ */
+function pageAttrs() {
+  return splitAttrs(attrs)
+}
+</script>
+
+<template>
+  <label v-if="toggle" :class="classes" :style="vars" v-bind="pageAttrs().outer">
+    <input
+      v-live-checked
+      v-model="on"
+      class="rkui-visually-hidden"
+      type="checkbox"
+      v-bind="pageAttrs().inner"
+    />
+    <slot />
+  </label>
+  <component
+    :is="href === undefined ? 'button' : 'a'"
+    v-else
+    :href="href"
+    :type="href === undefined ? type : undefined"
+    :class="classes"
+    :style="vars"
+    :aria-busy="busy ? 'true' : undefined"
+    :aria-disabled="busy ? 'true' : undefined"
+    v-bind="attrs"
+  >
+    <span
+      v-if="busy || water"
+      :class="level === undefined ? 'rkui-water rkui-water--rise' : 'rkui-water'"
+      aria-hidden="true"
+    />
+    <slot />
+  </component>
+</template>

package/src/components/button/button.css

@@ -0,0 +1,93 @@
+/* Buttons: filled by default, with fill modifiers, a small size and an unfilled secondary.
+   Works on <button> and on <a>. Put an .rkui-icon before the label for icon + label; the icon's
+   fill matches the button's. For a colour with no modifier, set --rkui-button-fill and
+   --rkui-button-label. */
+
+.rkui-button {
+  --rkui-button-fill: var(--rkui-yellow);
+  --rkui-button-label: var(--rkui-on-fill);
+  --rkui-icon-fill: var(--rkui-button-fill);
+  --rkui-button-padding-block: var(--rkui-space-2);
+  --rkui-button-padding-inline: var(--rkui-space-4);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rkui-space-2);
+  padding: var(--rkui-button-padding-block) var(--rkui-button-padding-inline);
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-button-fill);
+  color: var(--rkui-button-label);
+  font-weight: 700;
+  line-height: var(--rkui-line-height-heading);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.rkui-button .rkui-icon {
+  color: inherit;
+}
+
+.rkui-button--small {
+  --rkui-button-padding-block: var(--rkui-space-1);
+  --rkui-button-padding-inline: var(--rkui-space-3);
+  font-size: var(--rkui-step--1);
+}
+
+.rkui-button--navy {
+  --rkui-button-fill: var(--rkui-navy);
+  --rkui-button-label: var(--rkui-on-navy);
+}
+
+.rkui-button--teal {
+  --rkui-button-fill: var(--rkui-teal);
+}
+
+.rkui-button--green {
+  --rkui-button-fill: var(--rkui-green);
+}
+
+.rkui-button--coral {
+  --rkui-button-fill: var(--rkui-coral-solid);
+  --rkui-button-label: var(--rkui-on-coral);
+}
+
+.rkui-button--grape {
+  --rkui-button-fill: var(--rkui-grape);
+  --rkui-button-label: var(--rkui-on-grape);
+}
+
+.rkui-button--sky {
+  --rkui-button-fill: var(--rkui-sky);
+}
+
+.rkui-button--tangerine {
+  --rkui-button-fill: var(--rkui-tangerine);
+  --rkui-focus: var(--rkui-focus-alt);
+}
+
+.rkui-button--lilac {
+  --rkui-button-fill: var(--rkui-lilac);
+}
+
+.rkui-button--apricot {
+  --rkui-button-fill: var(--rkui-apricot);
+}
+
+.rkui-button--section {
+  --rkui-button-fill: var(--rkui-section, var(--rkui-ink));
+  --rkui-button-label: var(--rkui-on-section, var(--rkui-on-ink));
+}
+
+/* initial unsets --rkui-icon-fill, so an unfilled button's icons keep their own default fills. */
+.rkui-button--unfilled {
+  --rkui-icon-fill: initial;
+
+  border-color: var(--rkui-line-unfilled);
+  background: transparent;
+  color: var(--rkui-fg);
+}
+
+.rkui-button--unfilled:hover {
+  background: var(--rkui-raised);
+}

package/src/components/callout/Callout.vue

@@ -0,0 +1,31 @@
+<!--
+  An rkui callout: a tint panel with an icon and the slot as its text. `class`, `style` and other
+  attributes go on the outer `<div>`.
+
+  @example
+  <Callout kind="warning" title="Back up first"><p>This cannot be undone.</p></Callout>
+-->
+<script setup lang="ts">
+import InfoIcon from '@oneonefour/rkui/icons/info.vue'
+import WarningIcon from '@oneonefour/rkui/icons/warning.vue'
+
+interface Props {
+  /** 'note' or 'warning'; 'note' when left out. */
+  kind?: 'note' | 'warning'
+  /** A bold first line; none when left out. */
+  title?: string
+}
+
+const { kind = 'note', title } = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="['rkui-callout', `rkui-callout--${kind}`]" role="note">
+    <WarningIcon v-if="kind === 'warning'" class="rkui-icon" />
+    <InfoIcon v-else class="rkui-icon" />
+    <div class="rkui-callout-body">
+      <p v-if="title" class="rkui-callout-title">{{ title }}</p>
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/callout/callout.css

@@ -0,0 +1,39 @@
+/* Callouts: a static tint panel with an icon, as a note or a warning.
+
+   <div class="rkui-callout rkui-callout--note" role="note">
+     <svg class="rkui-icon">…</svg>
+     <div class="rkui-callout-body"><p class="rkui-callout-title">Title</p><p>Text</p></div>
+   </div> */
+
+.rkui-callout {
+  display: flex;
+  align-items: start;
+  gap: var(--rkui-space-3);
+  padding: var(--rkui-space-4);
+  border-radius: var(--rkui-radius);
+  color: var(--rkui-fg);
+}
+
+.rkui-callout-body > * {
+  margin-block: 0 var(--rkui-space-2);
+}
+
+.rkui-callout-body > :last-child {
+  margin-block-end: 0;
+}
+
+.rkui-callout-title {
+  font-weight: 700;
+}
+
+.rkui-callout--note {
+  --rkui-icon-fill: var(--rkui-teal);
+  background: var(--rkui-sky-tint);
+}
+
+/* Tangerine focus bands vanish on apricot, so focus inside a warning uses the alternate. */
+.rkui-callout--warning {
+  --rkui-focus: var(--rkui-focus-alt);
+  --rkui-icon-fill: var(--rkui-tangerine);
+  background: var(--rkui-apricot-tint);
+}