@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/alert/alert.css

@@ -0,0 +1,125 @@
+/* Alert: an urgent message in a box in the middle of the window, a native <dialog> opened as a
+   modal. The browser centres it, makes the page behind inert, moves focus in and back, and closes
+   it on Escape. The page behind is blurred, and doesn't scroll while the alert is open. It pops
+   in with one overshoot; it closes at once.
+
+   --rkui-alert-hue and --rkui-alert-on-hue set the band's fill and text (Alert.vue's `hue`);
+   coral (--rkui-coral-solid) when left alone.
+
+   <button class="rkui-button" commandfor="unsaved" command="show-modal">Leave</button>
+   <dialog class="rkui-alert" id="unsaved" role="alertdialog" aria-labelledby="unsaved-title"
+     aria-describedby="unsaved-message">
+     <div class="rkui-alert-band"><svg class="rkui-icon">…</svg>
+       <h2 class="rkui-alert-title" id="unsaved-title">Unsaved changes</h2></div>
+     <div class="rkui-alert-message" id="unsaved-message"><p>…</p></div>
+     <div class="rkui-alert-actions">
+       <button class="rkui-button" commandfor="unsaved" command="close">OK</button></div>
+   </dialog> */
+
+.rkui-alert {
+  --rkui-alert-hue: var(--rkui-coral-solid);
+  --rkui-alert-on-hue: var(--rkui-on-coral);
+  box-sizing: border-box;
+  inline-size: min(28rem, 100% - 2 * var(--rkui-space-4));
+  padding: 0;
+  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);
+  overscroll-behavior: contain;
+}
+
+/* The page stays still under an open alert; the scroll position is untouched, so it is the same
+   on close. A page that scrolls keeps the space its scrollbar leaves, so it doesn't shift
+   sideways, and a page that doesn't gains none. The page's scroll timeline is inactive when
+   nothing overflows, so the gutter is set only when the page scrolls. Longhands only, as in
+   overflow.css. Browsers without scroll-driven animations get data-rkui-page-scrolls from
+   alert-enhance.js instead. */
+:root:has(.rkui-alert:modal) {
+  overflow: hidden;
+}
+
+@supports (animation-timeline: scroll()) {
+  :root:has(.rkui-alert:modal) {
+    animation-name: rkui-alert-gutter;
+    animation-duration: auto;
+    animation-fill-mode: both;
+    animation-timeline: scroll(root);
+  }
+}
+
+:root[data-rkui-page-scrolls]:has(.rkui-alert:modal) {
+  scrollbar-gutter: stable;
+}
+
+@keyframes rkui-alert-gutter {
+  from,
+  to {
+    scrollbar-gutter: stable;
+  }
+}
+
+.rkui-alert[open] {
+  animation: rkui-alert-pop var(--rkui-duration-slide) var(--rkui-ease-snap);
+}
+
+.rkui-alert::backdrop {
+  background: none;
+  backdrop-filter: blur(var(--rkui-space-1));
+}
+
+.rkui-alert[open]::backdrop {
+  animation: rkui-alert-fade var(--rkui-duration-slide) ease;
+}
+
+.rkui-alert-band {
+  --rkui-icon-fill: var(--rkui-icon-fill-neutral);
+  display: flex;
+  align-items: center;
+  gap: var(--rkui-space-3);
+  padding: var(--rkui-space-3) var(--rkui-space-4);
+  border-block-end: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-start-start-radius: calc(var(--rkui-radius) - var(--rkui-outline-width));
+  border-start-end-radius: calc(var(--rkui-radius) - var(--rkui-outline-width));
+  background: var(--rkui-alert-hue);
+  color: var(--rkui-alert-on-hue);
+}
+
+.rkui-alert-title {
+  margin: 0;
+  font-size: var(--rkui-step-1);
+}
+
+.rkui-alert-message {
+  padding: var(--rkui-space-4);
+}
+
+.rkui-alert-message > :first-child {
+  margin-block-start: 0;
+}
+
+.rkui-alert-message > :last-child {
+  margin-block-end: 0;
+}
+
+.rkui-alert-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: end;
+  gap: var(--rkui-space-3);
+  padding: 0 var(--rkui-space-4) var(--rkui-space-4);
+}
+
+@keyframes rkui-alert-pop {
+  from {
+    opacity: 0;
+    scale: 0.85;
+  }
+}
+
+@keyframes rkui-alert-fade {
+  from {
+    opacity: 0;
+  }
+}

package/src/components/badge/Badge.vue

@@ -0,0 +1,74 @@
+<!--
+  A small pill for a status or a count. Inline it needs no wrapper. On a corner, put the badge
+  inside a `BadgeHost` (or a `Button` with `class="rkui-badge-host"`) beside the picture or button
+  it marks. The slot is the visible text, and may start with an icon. `class`, `style` and other
+  attributes go on the `<span>`.
+
+  @example
+  <Badge hue="grape">New</Badge>
+  <Badge hue="#ff8800" tint>Custom</Badge>
+  <BadgeHost><img src="avatar.png" alt="Ada" /><Badge hue="coral" corner>3</Badge></BadgeHost>
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { hueVars, isHex, type HueOrHex } from '../../shared/hues'
+
+interface Props {
+  /** The colour: a palette hue or a hex code; yellow when left out. */
+  hue?: HueOrHex
+  /** The quiet version, a tint panel with ordinary text; solid when left out. */
+  tint?: boolean
+  /** Pins the badge to its host's top corner; inline when left out. */
+  corner?: boolean
+  /** With `corner`, pins it to the bottom corner; the top when left out. */
+  bottom?: boolean
+  /** With `corner`, a status dot with no visible text; a pill when left out. */
+  dot?: boolean
+  /**
+   * A corner badge's edge: 'ring' (a ring in the page colour) or 'sticker' (the outline and a small
+   * hard shadow); 'outline' when left out. Open, see DECISIONS ("Badges").
+   */
+  edge?: 'outline' | 'ring' | 'sticker'
+  /**
+   * Text for screen readers only, after the visible text; the whole accessible name for a dot;
+   * none when left out.
+   */
+  hiddenLabel?: string
+}
+
+const { hue, tint, corner, bottom, dot, edge = 'outline', hiddenLabel } = defineProps<Props>()
+
+/** A hex colour's fill, label and tint as custom properties; a hue sets them by its class. */
+const vars = computed(() =>
+  isHex(hue)
+    ? hueVars(hue, {
+        fill: '--rkui-badge-fill',
+        text: '--rkui-badge-label',
+        tint: '--rkui-badge-tint',
+      })
+    : {},
+)
+</script>
+
+<template>
+  <span
+    :class="[
+      'rkui-badge',
+      hue && !isHex(hue) && `rkui-badge--${hue}`,
+      {
+        'rkui-badge--tint': tint,
+        'rkui-badge--corner': corner,
+        'rkui-badge--bottom': bottom,
+        'rkui-badge--dot': dot,
+        'rkui-badge--ring': edge === 'ring',
+        'rkui-badge--sticker': edge === 'sticker',
+      },
+    ]"
+    :style="vars"
+  >
+    <slot />
+    <span v-if="hiddenLabel" class="rkui-visually-hidden">
+      {{ $slots.default ? ' ' : '' }}{{ hiddenLabel }}
+    </span>
+  </span>
+</template>

package/src/components/badge/BadgeHost.vue

@@ -0,0 +1,24 @@
+<!--
+  The wrapper a corner `Badge` sits on. The slot holds the picture and the badge. (A `Button` can
+  be its own host with `class="rkui-badge-host"`.) `class`, `style` and other attributes go on the
+  `<span>`.
+
+  @example
+  <BadgeHost round>
+    <img src="avatar.png" alt="Ada" /><Badge corner dot hiddenLabel="Online" />
+  </BadgeHost>
+-->
+<script setup lang="ts">
+interface Props {
+  /** The host is a circle, so the badge sits on its edge; a rectangle when left out. */
+  round?: boolean
+}
+
+const { round } = defineProps<Props>()
+</script>
+
+<template>
+  <span :class="['rkui-badge-host', { 'rkui-badge-host--round': round }]">
+    <slot />
+  </span>
+</template>

package/src/components/badge/badge.css

@@ -0,0 +1,142 @@
+/* Badges: a small pill for a status or a count. Static, so inline badges have no outline.
+   Solid by default (yellow); .rkui-badge--tint is the quiet version, a tint panel with --rkui-fg
+   text. The hue modifiers set both; for any other colour, set --rkui-badge-fill, --rkui-badge-label
+   and --rkui-badge-tint. An .rkui-icon inside takes the badge's fill as its own.
+
+   On a corner: wrap the picture or button in .rkui-badge-host and add .rkui-badge--corner. On a
+   round host, add .rkui-badge-host--round so the badge sits on the circle's edge. .rkui-badge--dot
+   is a status dot with no visible text, and .rkui-badge--bottom moves a corner badge to the bottom.
+   The corner badge's edge has three options: A, the outline (default); B, .rkui-badge--ring, a ring
+   in the page colour; C, .rkui-badge--sticker, the outline and a small hard shadow.
+
+   <span class="rkui-badge rkui-badge--grape">Label</span>
+   <span class="rkui-badge-host">
+     <button class="rkui-button">…</button>
+     <span class="rkui-badge rkui-badge--coral rkui-badge--corner">3<span
+       class="rkui-visually-hidden"> new</span></span>
+   </span> */
+
+.rkui-badge {
+  --rkui-badge-fill: var(--rkui-yellow);
+  --rkui-badge-label: var(--rkui-on-fill);
+  --rkui-badge-tint: var(--rkui-yellow-tint);
+  --rkui-icon-fill: var(--rkui-badge-fill);
+
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rkui-space-1);
+  padding: 0.125rem var(--rkui-space-2);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-badge-fill);
+  color: var(--rkui-badge-label);
+  font-size: var(--rkui-step--1);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  line-height: var(--rkui-line-height-heading);
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.rkui-badge .rkui-icon {
+  inline-size: 1em;
+  block-size: 1em;
+  color: inherit;
+}
+
+.rkui-badge--tint {
+  background: var(--rkui-badge-tint);
+  color: var(--rkui-fg);
+}
+
+/* :where() keeps the host's display below a component's own, such as a button's. */
+:where(.rkui-badge-host) {
+  position: relative;
+  display: inline-flex;
+}
+
+/* 14.6% in from the box's corner is the point on a circle at 45°. */
+.rkui-badge-host--round {
+  --rkui-badge-inset: 14.6%;
+}
+
+/* The badge's centre sits on the corner: it overhangs by half its height on each side. */
+.rkui-badge--corner {
+  --rkui-badge-size: 1.25rem;
+
+  position: absolute;
+  inset-block-start: calc(var(--rkui-badge-inset, 0px) - var(--rkui-badge-size) / 2);
+  inset-inline-end: calc(var(--rkui-badge-inset, 0px) - var(--rkui-badge-size) / 2);
+  min-inline-size: var(--rkui-badge-size);
+  block-size: var(--rkui-badge-size);
+  padding: 0 var(--rkui-space-1);
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+}
+
+.rkui-badge--dot {
+  --rkui-badge-size: 0.875rem;
+
+  padding: 0;
+}
+
+.rkui-badge--bottom {
+  inset-block-start: auto;
+  inset-block-end: calc(var(--rkui-badge-inset, 0px) - var(--rkui-badge-size) / 2);
+}
+
+.rkui-badge--ring {
+  border-color: var(--rkui-surface);
+}
+
+.rkui-badge--sticker {
+  box-shadow: var(--rkui-shadow-pressed);
+}
+
+.rkui-badge--navy {
+  --rkui-badge-fill: var(--rkui-navy);
+  --rkui-badge-label: var(--rkui-on-navy);
+  --rkui-badge-tint: var(--rkui-navy-tint);
+}
+
+.rkui-badge--teal {
+  --rkui-badge-fill: var(--rkui-teal);
+  --rkui-badge-tint: var(--rkui-teal-tint);
+}
+
+.rkui-badge--green {
+  --rkui-badge-fill: var(--rkui-green);
+  --rkui-badge-tint: var(--rkui-green-tint);
+}
+
+.rkui-badge--coral {
+  --rkui-badge-fill: var(--rkui-coral-solid);
+  --rkui-badge-label: var(--rkui-on-coral);
+  --rkui-badge-tint: var(--rkui-coral-tint);
+}
+
+.rkui-badge--grape {
+  --rkui-badge-fill: var(--rkui-grape);
+  --rkui-badge-label: var(--rkui-on-grape);
+  --rkui-badge-tint: var(--rkui-grape-tint);
+}
+
+.rkui-badge--sky {
+  --rkui-badge-fill: var(--rkui-sky);
+  --rkui-badge-tint: var(--rkui-sky-tint);
+}
+
+.rkui-badge--tangerine {
+  --rkui-badge-fill: var(--rkui-tangerine);
+  --rkui-badge-tint: var(--rkui-tangerine-tint);
+}
+
+.rkui-badge--lilac {
+  --rkui-badge-fill: var(--rkui-lilac);
+  --rkui-badge-tint: var(--rkui-lilac-tint);
+}
+
+.rkui-badge--apricot {
+  --rkui-badge-fill: var(--rkui-apricot);
+  --rkui-badge-tint: var(--rkui-apricot-tint);
+}

package/src/components/ballot/Ballot.vue

@@ -0,0 +1,71 @@
+<!--
+  A ballot: a column of options, each a tile beside a bordered text box. The slot holds the
+  BallotOptions. Each row is one label, so clicking anywhere on it votes. Radios for one choice,
+  checkboxes with `multiple`. `class`, `style` and other attributes go on the fieldset. In a `.vue`
+  file, `v-model` is the chosen option's value (a list of values with `multiple`). With `v-model`,
+  the parent's value is the starting value unless it is undefined; then `checked` applies and is
+  handed to the parent (for one choice, the first option marked wins).
+
+  @example
+  <Ballot legend="Vote">
+    <BallotOption value="a" mark="A" checked>First</BallotOption>
+    <BallotOption value="b" mark="B">Second</BallotOption>
+  </Ballot>
+  <Ballot v-model="vote" legend="Vote">…</Ballot>
+-->
+<script setup lang="ts">
+import { computed, provide, useSlots } from 'vue'
+import { useComponentId } from '../../shared/component-id'
+import { modelWithStart } from '../../shared/model-start'
+import { checkedValue, fillSlot, OPTION_GROUP } from '../../shared/option-slot'
+
+interface Props {
+  /** The group's name, visually hidden. */
+  legend: string
+  /** The inputs' name, filled into every option; a unique one is made when left out. */
+  name?: string
+  /** Checkboxes instead of radios; radios when left out. */
+  multiple?: boolean
+  /** The tiles on the right; on the left when left out. */
+  markEnd?: boolean
+  /** Each tile straddles its text box's edge; beside it when left out. */
+  overlap?: boolean
+  /** Each tile sits inside its text box; beside it when left out. */
+  inside?: boolean
+  /** No gap between rows; a gap when left out. */
+  tight?: boolean
+}
+
+const { legend, name, multiple, markEnd, overlap, inside, tight } = defineProps<Props>()
+
+/**
+ * The chosen value, or values with `multiple` (`v-model`); the `checked` options' when left out.
+ */
+const model = defineModel<string | string[]>()
+const slots = useSlots()
+const selection = modelWithStart(model, () => checkedValue(slots.default?.() ?? [], multiple))
+const generatedName = useComponentId('ballot')
+const group = computed(() => ({ name: name ?? generatedName, multiple, model: selection }))
+provide(OPTION_GROUP, group)
+</script>
+
+<template>
+  <fieldset
+    :class="[
+      'rkui-ballot',
+      {
+        'rkui-ballot--mark-end': markEnd,
+        'rkui-ballot--overlap': overlap,
+        'rkui-ballot--inside': inside,
+        'rkui-ballot--tight': tight,
+      },
+    ]"
+  >
+    <legend class="rkui-visually-hidden">{{ legend }}</legend>
+    <component
+      :is="option"
+      v-for="(option, i) in fillSlot($slots.default?.() ?? [], group)"
+      :key="i"
+    />
+  </fieldset>
+</template>

package/src/components/ballot/BallotOption.vue

@@ -0,0 +1,83 @@
+<!--
+  One option of a Ballot: a tile beside a bordered text box, in one label. The slot is the title;
+  the `icon` slot (`slot="icon"` in Astro, `<template #icon>` in Vue) holds an optional icon for
+  the tile.
+  `class` and `style` go on the label; other attributes go on the input.
+
+  @example
+  <BallotOption value="a" mark="A" text="A longer line under the title.">First</BallotOption>
+-->
+<script setup lang="ts">
+import { computed, useAttrs, useSlots } from 'vue'
+import Tile from '../tiles/Tile.vue'
+import { hueVars, type HueOrHex } from '../../shared/hues'
+import { splitAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The value the form sends when this option is chosen. */
+  value: string
+  /** A longer line under the title; none when left out. */
+  text?: string
+  /** A letter or number for the tile; none when left out, and with no icon the tile is empty. */
+  mark?: string
+  /**
+   * A hue or hex code: the tile is filled with it when it holds no mark or icon, and `tint` uses
+   * it; none when left out.
+   */
+  hue?: HueOrHex
+  /** Fill the box with the colour's tint when checked; the usual tint when left out. */
+  tint?: boolean
+  /** The input's name; its group's name when left out. */
+  name?: string
+  /** Starts chosen; unchosen when left out. */
+  checked?: boolean
+  /** Can't be chosen; enabled when left out. */
+  disabled?: boolean
+}
+
+const { value, text, mark, hue, tint, name, checked, disabled } = defineProps<Props>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+/** Whether the tile is a plain colour: a colour with no mark or icon. */
+function swatch() {
+  return hue !== undefined && !mark && !slots.icon
+}
+
+/** The colour's tint as a custom property, with `tint` and a colour. */
+const vars = computed(() => (tint ? hueVars(hue, { tint: '--rkui-selected-tint' }) : {}))
+
+/**
+ * The page's attributes: `class` and `style` for the label (`outer`), the rest for the Tile, which
+ * puts them on its input.
+ */
+function pageAttrs() {
+  return splitAttrs(attrs)
+}
+</script>
+
+<template>
+  <label class="rkui-ballot-option" :style="vars" v-bind="pageAttrs().outer">
+    <!-- The Tile finds its Ballot by inject, for its input's name, type and checked state. -->
+    <Tile
+      tag="span"
+      :value
+      :name
+      :checked
+      :disabled
+      :hue="swatch() ? hue : undefined"
+      v-bind="pageAttrs().inner"
+    >
+      <template v-if="!swatch()" #default>
+        <slot name="icon">{{ mark }}</slot>
+      </template>
+    </Tile>
+    <span class="rkui-ballot-text">
+      <strong><slot /></strong>
+      <span v-if="text">{{ text }}</span>
+    </span>
+  </label>
+</template>