@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/card/Card.vue

@@ -0,0 +1,59 @@
+<!--
+  An rkui card: an `<article>` with a title and a body. With `href` the whole card is one link (its
+  title), outlined, with the hard shadow and the pop; without, it is a static panel that never
+  lifts, its edge set by `variant`. The slot is the body; the `image` slot holds an
+  `<img class="rkui-card-image">` or similar (`slot="image"` in Astro, `<template #image>` in Vue).
+  `class`, `style` and other attributes go on the `<article>`.
+
+  @example
+  <Card title="Field notes" href="/notes/" meta="Updated today" hue="teal"><p>Recent entries.</p></Card>
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { hueVars, type HueOrHex } from '../../shared/hues'
+
+interface Props {
+  /** The card's title, and the link text when linked. */
+  title: string
+  /** Where the card links to; a static panel when left out. */
+  href?: string
+  /** A short line under the title; none when left out. */
+  meta?: string
+  /** The title's heading level, to fit the page outline; 3 when left out. */
+  headingLevel?: 2 | 3 | 4
+  /**
+   * A static card's edge: 'raised' (the outline and a hard shadow that doesn't lift), 'shaded' (a
+   * panel fill with no outline) or 'inset' (pushed into the page); 'outline' when left out. A
+   * linked card ignores it.
+   */
+  variant?: 'outline' | 'raised' | 'shaded' | 'inset'
+  /**
+   * The colour its hard shadow takes with `data-shadow="color"` in dark mode, such as one from its
+   * image: a palette hue or a hex code. Only a linked or raised card has a hard shadow, and the
+   * other shadows keep theirs; `--rkui-shadow-lit` when left out.
+   */
+  hue?: HueOrHex
+}
+
+const { title, href, meta, headingLevel = 3, variant = 'outline', hue } = defineProps<Props>()
+
+/** The card's modifier: the link, or a static card's variant. */
+const look = computed(() => (href ? 'rkui-card--link' : `rkui-card--${variant}`))
+
+/** The hue its colour-mode shadow is mixed from. */
+const vars = computed(() => hueVars(hue, { fill: '--rkui-card-hue' }))
+</script>
+
+<template>
+  <article :class="['rkui-card', look]" :style="vars">
+    <slot name="image" />
+    <div class="rkui-card-body">
+      <component :is="`h${headingLevel}`" class="rkui-card-title">
+        <a v-if="href" class="rkui-card-link" :href="href">{{ title }}</a>
+        <template v-else>{{ title }}</template>
+      </component>
+      <p v-if="meta" class="rkui-card-meta">{{ meta }}</p>
+      <slot />
+    </div>
+  </article>
+</template>

package/src/components/card/card.css

@@ -0,0 +1,117 @@
+/* Cards: a panel with optional image, title, meta and body. .rkui-card--link makes the whole card
+   one link: its title link stretches over the card, so there is a single tab stop and the link
+   text is the card's accessible name. It is outlined and pops (interactive.css). A static card
+   never lifts; its edge is one of:
+   - .rkui-card--outline, the outline alone (Card.vue's default);
+   - .rkui-card--raised, the outline and a hard shadow;
+   - .rkui-card--shaded, a panel fill with no outline;
+   - .rkui-card--inset, pushed into the page like a drawer's tray.
+   With data-shadow="color" in dark mode a linked or raised card's shadow is the shade of
+   --rkui-card-hue where it is set (shadow-color.css).
+
+   <article class="rkui-card rkui-card--link">
+     <img class="rkui-card-image" src="…" alt="">
+     <div class="rkui-card-body">
+       <h3 class="rkui-card-title"><a class="rkui-card-link" href="…">Title</a></h3>
+       <p class="rkui-card-meta">Meta</p>
+       <p>Body</p>
+     </div>
+   </article> */
+
+.rkui-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-raised);
+  color: var(--rkui-fg);
+}
+
+.rkui-card-image {
+  inline-size: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+}
+
+.rkui-card-body {
+  display: grid;
+  gap: var(--rkui-space-2);
+  padding: var(--rkui-space-4);
+}
+
+.rkui-card-body > * {
+  margin: 0;
+}
+
+.rkui-card-title {
+  font-size: var(--rkui-step-1);
+}
+
+.rkui-card-meta {
+  color: var(--rkui-muted);
+  font-size: var(--rkui-step--1);
+}
+
+.rkui-card--link {
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+}
+
+.rkui-card--link .rkui-card-image {
+  border-block-end: var(--rkui-outline-width) solid var(--rkui-line);
+}
+
+/* A static card's outline is the folder sheet's, so it shows on the dark page too. */
+:is(.rkui-card--outline, .rkui-card--raised) {
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+}
+
+:is(.rkui-card--outline, .rkui-card--raised) .rkui-card-image {
+  border-block-end: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+}
+
+.rkui-card--raised {
+  box-shadow: var(--rkui-shadow);
+}
+
+.rkui-card--shaded {
+  background: var(--rkui-panel);
+}
+
+/* Sunk like a drawer's tray, with the inset (shadows.css). The inner shadow is drawn over the
+   card, so an image doesn't cover it. */
+.rkui-card--inset {
+  --rkui-recess-floor: var(--rkui-folder-back);
+
+  background: var(--rkui-recess-floor);
+}
+
+.rkui-card--inset::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: var(--rkui-shadow-recess);
+  pointer-events: none;
+}
+
+.rkui-card-link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.rkui-card-link::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+.rkui-card--link:hover .rkui-card-link {
+  text-decoration: underline;
+}
+
+/* The card shows the focus band, so the link drops its own marker-pen focus. */
+.rkui-card-link:focus-visible {
+  background: none;
+  color: inherit;
+}

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,50 @@
+<!--
+  A checkbox: a native checkbox inside a `label.rkui-check`. The slot is the label text.
+  `class` and `style` go on the label; other attributes (name, value, disabled, required,
+  aria-invalid, ...) go on the input. In a `.vue` file, `v-model` is whether it is checked.
+  With `v-model`, the parent's value is the starting value; `checked` applies only without one.
+
+  @example
+  <Checkbox name="news" checked>Send me the newsletter</Checkbox>
+  <Checkbox v-model="news">Send me the newsletter</Checkbox>
+-->
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import { vLiveChecked } from '../../shared/live-value'
+import { splitAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** Starts checked; unchecked when left out. */
+  checked?: boolean
+}
+
+const { checked } = defineProps<Props>()
+
+/**
+ * Whether it is checked (`v-model`); `checked` when left out.
+ */
+// The undefined default stops Vue reading a missing model as false.
+const model = defineModel<boolean | undefined>({ default: undefined })
+if (model.value === undefined) model.value = checked
+const attrs = useAttrs()
+
+/** The page's attributes: `class` and `style` for the label (`outer`), the rest for the input. */
+function pageAttrs() {
+  return splitAttrs(attrs)
+}
+</script>
+
+<template>
+  <label class="rkui-check" v-bind="pageAttrs().outer">
+    <input
+      v-live-checked
+      v-model="model"
+      class="rkui-checkbox"
+      type="checkbox"
+      v-bind="pageAttrs().inner"
+    />
+    <slot />
+  </label>
+</template>

package/src/components/checkbox/Radio.vue

@@ -0,0 +1,51 @@
+<!--
+  A radio button: a native radio inside a `label.rkui-check`. The slot is the label text.
+  Radios with the same `name` form a group. `class` and `style` go on the label; other attributes
+  (name, disabled, required, aria-invalid, ...) go on the input. In a `.vue` file, give each radio
+  in a group the same `v-model`: it holds the chosen radio's `value`. With `v-model`, the parent's
+  value is the starting value; `checked` applies only without one.
+
+  @example
+  <Radio name="size" value="s" checked>Small</Radio>
+  <Radio v-model="size" value="s">Small</Radio>
+-->
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import { vLiveChecked } from '../../shared/live-value'
+import { splitAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The value the form sends, and the model holds, when this radio is chosen. */
+  value: string
+  /** Starts chosen; unchosen when left out. */
+  checked?: boolean
+}
+
+const { value, checked } = defineProps<Props>()
+
+/** The chosen radio's value (`v-model`); this one's `value` when it is `checked`. */
+const model = defineModel<string>()
+if (model.value === undefined && checked) model.value = value
+const attrs = useAttrs()
+
+/** The page's attributes: `class` and `style` for the label (`outer`), the rest for the input. */
+function pageAttrs() {
+  return splitAttrs(attrs)
+}
+</script>
+
+<template>
+  <label class="rkui-check" v-bind="pageAttrs().outer">
+    <input
+      v-live-checked
+      v-model="model"
+      class="rkui-radio"
+      type="radio"
+      :value
+      v-bind="pageAttrs().inner"
+    />
+    <slot />
+  </label>
+</template>

package/src/components/checkbox/checkbox.css

@@ -0,0 +1,82 @@
+/* Checkboxes (.rkui-checkbox) and radio buttons (.rkui-radio) on native inputs. Checked, they fill
+   with --rkui-selected and show a tick or dot in --rkui-on-selected; in error they fill with
+   --rkui-coral-solid and the mark is --rkui-on-coral. Wrap each in a
+   label.rkui-check. */
+
+.rkui-checkbox,
+.rkui-radio {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex: none;
+  inline-size: 1.375rem;
+  block-size: 1.375rem;
+  margin: 0;
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  background: var(--rkui-raised);
+  cursor: pointer;
+}
+
+.rkui-checkbox {
+  border-radius: calc(var(--rkui-radius) / 2);
+}
+
+.rkui-radio {
+  border-radius: 50%;
+}
+
+.rkui-checkbox:checked,
+.rkui-radio:checked {
+  border-color: var(--rkui-line);
+  background: var(--rkui-selected);
+}
+
+/* The tick is the bottom and right borders of a box, turned 45°. */
+.rkui-checkbox:checked::before {
+  content: '';
+  inline-size: 0.375rem;
+  block-size: 0.75rem;
+  margin-block-start: -0.125rem;
+  border: solid var(--rkui-on-selected);
+  border-width: 0 3px 3px 0;
+  rotate: 45deg;
+}
+
+.rkui-radio:checked::before {
+  content: '';
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 50%;
+  background: var(--rkui-on-selected);
+}
+
+.rkui-checkbox[aria-invalid='true'],
+.rkui-radio[aria-invalid='true'] {
+  border-color: var(--rkui-coral-deep);
+  background: var(--rkui-coral-solid);
+}
+
+.rkui-checkbox[aria-invalid='true']:checked::before {
+  border-color: var(--rkui-on-coral);
+}
+
+.rkui-radio[aria-invalid='true']:checked::before {
+  background: var(--rkui-on-coral);
+}
+
+/* Forced colours drop the checked fill, so the checked box and its mark use system colours. */
+@media (forced-colors: active) {
+  .rkui-checkbox:checked,
+  .rkui-radio:checked {
+    border-color: Highlight;
+    background: Highlight;
+  }
+
+  .rkui-checkbox:checked::before {
+    border-color: HighlightText;
+  }
+
+  .rkui-radio:checked::before {
+    background: HighlightText;
+  }
+}

package/src/components/chip/Chip.vue

@@ -0,0 +1,60 @@
+<!--
+  A filter chip: a pill label around a native checkbox or radio. The slot is the label text, after
+  an optional icon. Put chips in a ChipGroup, which fills in their `name` and input type, and holds
+  their `v-model`. `class` and `style` go on the label; other attributes go on the input.
+
+  @example
+  <Chip value="fruit" checked>Fruit</Chip>
+-->
+<script setup lang="ts">
+import { computed, inject, useAttrs } from 'vue'
+import { vLiveChecked } from '../../shared/live-value'
+import { NAME_PLACEHOLDER } from '../../shared/option-group'
+import { OPTION_GROUP, useOptionModel } from '../../shared/option-slot'
+import { splitAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The value the form sends when this chip is chosen. */
+  value: string
+  /** 'checkbox' or 'radio'; its ChipGroup's type, or a checkbox on its own, when left out. */
+  type?: 'checkbox' | 'radio'
+  /** 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, type, name, checked, disabled } = defineProps<Props>()
+
+// Inside a Vue tree the group's name, input type and model arrive by inject. Rendered by Astro on
+// its own, the chip writes a placeholder name on a checkbox, and the group around it fills in its
+// own name and type (option-group.ts).
+const group = inject(OPTION_GROUP, null)
+const inputType = computed(() => type ?? (group && !group.value.multiple ? 'radio' : 'checkbox'))
+const selection = useOptionModel(group, { type: inputType.value, value, checked })
+const attrs = useAttrs()
+
+/** The page's attributes: `class` and `style` for the label (`outer`), the rest for the input. */
+function pageAttrs() {
+  return splitAttrs(attrs)
+}
+</script>
+
+<template>
+  <label class="rkui-chip" v-bind="pageAttrs().outer">
+    <input
+      v-live-checked
+      v-model="selection"
+      :type="inputType"
+      :name="name ?? group?.name ?? NAME_PLACEHOLDER"
+      :value
+      :disabled
+      v-bind="pageAttrs().inner"
+    />
+    <slot />
+  </label>
+</template>

package/src/components/chip/ChipGroup.vue

@@ -0,0 +1,59 @@
+<!--
+  A group of filter chips: a fieldset with a visually hidden legend. The slot holds the Chips.
+  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 chip'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 chip marked wins).
+
+  @example
+  <ChipGroup legend="Topics" multiple>
+    <Chip value="fruit" checked>Fruit</Chip>
+    <Chip value="veg">Veg</Chip>
+  </ChipGroup>
+  <ChipGroup v-model="topics" legend="Topics" hue="teal">…</ChipGroup>
+-->
+<script setup lang="ts">
+import { computed, provide, useSlots } from 'vue'
+import { useComponentId } from '../../shared/component-id'
+import { hueVars, type HueOrHex } from '../../shared/hues'
+import { modelWithStart } from '../../shared/model-start'
+import { checkedValue, fillSlot, OPTION_GROUP } from '../../shared/option-slot'
+
+interface Props {
+  /** The group's name for screen readers. */
+  legend: string
+  /** The inputs' name, filled into every chip; a unique one is made when left out. */
+  name?: string
+  /** Checkboxes instead of radios; radios when left out. */
+  multiple?: boolean
+  /**
+   * The checked chips' fill, a hue or a hex code; the page's section hue (`--rkui-section`), or
+   * ink, when left out.
+   */
+  hue?: HueOrHex
+}
+
+const { legend, name, multiple, hue } = defineProps<Props>()
+
+/**
+ * The chosen value, or values with `multiple` (`v-model`); the `checked` chips' when left out.
+ */
+const model = defineModel<string | string[]>()
+const slots = useSlots()
+const selection = modelWithStart(model, () => checkedValue(slots.default?.() ?? [], multiple))
+const generatedName = useComponentId('chips')
+const group = computed(() => ({ name: name ?? generatedName, multiple, model: selection }))
+provide(OPTION_GROUP, group)
+
+/** The checked chips' fill and text as custom properties, when `hue` is set. */
+const vars = computed(() =>
+  hueVars(hue, { fill: '--rkui-section', text: '--rkui-on-section', solid: true }),
+)
+</script>
+
+<template>
+  <fieldset class="rkui-chip-group" :style="vars">
+    <legend class="rkui-visually-hidden">{{ legend }}</legend>
+    <component :is="chip" v-for="(chip, i) in fillSlot($slots.default?.() ?? [], group)" :key="i" />
+  </fieldset>
+</template>

package/src/components/chip/chip.css

@@ -0,0 +1,73 @@
+/* Filter chips: pill labels around a native checkbox (multi-select) or radio (single select),
+   with an optional .rkui-icon before the text. Checked chips, and their icons' fills, take
+   --rkui-section, with --rkui-on-section text; set those on the chip or its group to pass in
+   a hue. With no section they invert: an ink fill in light mode, the light foreground in dark.
+   A chip can also be a link (<a class="rkui-chip">), with aria-current="page" filling it like a
+   checked one.
+
+   <fieldset class="rkui-chip-group">
+     <legend class="rkui-visually-hidden">Topic</legend>
+     <label class="rkui-chip"><input type="checkbox" name="topic" value="a"> Label</label>
+     …
+   </fieldset> */
+
+.rkui-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rkui-space-3);
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.rkui-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rkui-space-1);
+  padding: var(--rkui-space-1) var(--rkui-space-3);
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-raised);
+  color: var(--rkui-fg);
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.rkui-chip input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.rkui-chip .rkui-icon {
+  color: inherit;
+}
+
+/* With no section hue, a checked chip is inverted: dark ink in light mode, the light foreground
+   in dark mode, so it stands apart from the unfilled chip on a dark page. */
+.rkui-chip {
+  --rkui-chip-checked: light-dark(var(--rkui-ink), var(--rkui-fg));
+  --rkui-chip-on-checked: light-dark(var(--rkui-on-ink), var(--rkui-ink));
+}
+
+.rkui-chip:is(:has(:checked), [aria-current='page']) {
+  --rkui-icon-fill: var(--rkui-section, var(--rkui-chip-checked));
+
+  border-color: var(--rkui-line);
+  background: var(--rkui-section, var(--rkui-chip-checked));
+  color: var(--rkui-on-section, var(--rkui-chip-on-checked));
+}
+
+/* Forced colours drop the checked fill, so the checked chip uses system colours. Without
+   forced-color-adjust, the browser puts a Canvas backplate behind the HighlightText label. */
+@media (forced-colors: active) {
+  .rkui-chip:is(:has(:checked), [aria-current='page']) {
+    forced-color-adjust: none;
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+  }
+}