@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/search/search.css

@@ -0,0 +1,138 @@
+/* Search fields, in two variants (A, B). Both swap WebKit's clear button for our ×.
+
+   Search A: a magnifying glass inside the field.
+   <div class="rkui-search">
+     <input class="rkui-input" type="search" aria-label="Search">
+   </div>
+
+   Search B: a filled search button joined to the field's end. The two are one raised unit, which
+   is pressed into its shadow when the button is.
+   <form class="rkui-search-bar" role="search">
+     <input class="rkui-input" type="search" aria-label="Search">
+     <button class="rkui-button" type="submit">Search</button>
+   </form>
+
+   The icons are masks filled with currentColor. forced-color-adjust keeps that fill in forced
+   colours, where currentColor is the system text colour. */
+
+.rkui-input[type='search'] {
+  appearance: none;
+}
+
+.rkui-input[type='search']::-webkit-search-decoration {
+  appearance: none;
+}
+
+.rkui-input[type='search']::-webkit-search-cancel-button {
+  appearance: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  margin-inline-start: var(--rkui-space-2);
+  background-color: currentColor;
+  mask: url('../../../dist/icons/x.svg') center / contain no-repeat;
+  forced-color-adjust: none;
+  cursor: pointer;
+}
+
+/* Search A */
+
+.rkui-search {
+  --rkui-search-icon-size: 1.25rem;
+
+  position: relative;
+  inline-size: 100%;
+  max-inline-size: 30rem;
+}
+
+.rkui-search::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: var(--rkui-space-3);
+  inline-size: var(--rkui-search-icon-size);
+  background-color: currentColor;
+  mask: url('../../../dist/icons/magnifying-glass.svg') center / contain no-repeat;
+  forced-color-adjust: none;
+  pointer-events: none;
+}
+
+.rkui-search:has(:disabled)::before {
+  opacity: 0.45;
+}
+
+.rkui-search .rkui-input {
+  padding-inline-start: calc(
+    var(--rkui-space-3) + var(--rkui-search-icon-size) + var(--rkui-space-2)
+  );
+}
+
+/* Search B */
+
+.rkui-search-bar {
+  --rkui-press-overshoot: calc(var(--rkui-shadow-depth) * 2px);
+
+  display: flex;
+  inline-size: 100%;
+  max-inline-size: 30rem;
+  border-radius: var(--rkui-radius);
+  box-shadow: var(--rkui-shadow);
+  transition:
+    translate var(--rkui-duration-spring) var(--rkui-ease-spring),
+    box-shadow var(--rkui-duration-fast) ease;
+}
+
+.rkui-search-bar .rkui-input {
+  flex: 1;
+  min-inline-size: 0;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/* The button's border is the divider, and matches the field's so the unit has one outline. */
+.rkui-search-bar .rkui-button {
+  margin-inline-start: calc(-1 * var(--rkui-outline-width));
+  border-color: var(--rkui-line-unfilled);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+
+/* The unit pops, not the button. */
+.rkui-search-bar .rkui-button,
+.rkui-search-bar .rkui-button:is(:hover, :active) {
+  box-shadow: none;
+  translate: none;
+}
+
+/* Pressed, the unit drives past its pressed depth, flush with the page, then settles. On release
+   the transition springs it back up. */
+.rkui-search-bar:has(.rkui-button:active) {
+  box-shadow: var(--rkui-shadow-pressed);
+  translate: var(--rkui-press-offset-x) var(--rkui-press-offset-y);
+  animation: rkui-search-bar-press var(--rkui-duration-spring) ease-out;
+}
+
+@keyframes rkui-search-bar-press {
+  from {
+    box-shadow: var(--rkui-shadow);
+    translate: 0 0;
+  }
+
+  50% {
+    box-shadow: none;
+    translate: calc(
+        var(--rkui-press-offset-x) + var(--rkui-shadow-dx) * var(--rkui-press-overshoot)
+      )
+      calc(var(--rkui-press-offset-y) + var(--rkui-shadow-dy) * var(--rkui-press-overshoot));
+  }
+}
+
+/* The focused part shows the band, drawn over its neighbour, and the unit loses its shadow. */
+.rkui-search-bar > :focus-visible {
+  position: relative;
+  z-index: 1;
+}
+
+.rkui-search-bar:has(:focus-visible),
+.rkui-search-bar:has(:disabled) {
+  box-shadow: none;
+}

package/src/components/segmented/Segmented.vue

@@ -0,0 +1,46 @@
+<!--
+  A segmented control: a pill group of native radios, built from SegmentedOptions, which can each
+  have an icon before the label. The slot holds the SegmentedOptions. With `deck` it is a row of
+  raised keys, like a tape deck's. `class`, `style` and other attributes go on the fieldset. In
+  Safari before 26 the checked fill doesn't slide between options; each option fills on its own.
+
+  @example
+  <Segmented legend="View">
+    <SegmentedOption value="list" checked>List</SegmentedOption>
+    <SegmentedOption value="grid">Grid</SegmentedOption>
+  </Segmented>
+-->
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { useComponentId } from '../../shared/component-id'
+import { fillSlot, OPTION_GROUP } from '../../shared/option-slot'
+
+interface Props {
+  /** The group's name, visually hidden. */
+  legend: string
+  /** The radios' name, filled into every option; a unique one is made when left out. */
+  name?: string
+  /** Raised keys; a pill when left out. */
+  deck?: boolean
+  /** For a deck: its frame as a flat outlined plate; raised when left out. */
+  plate?: boolean
+}
+
+const { legend, name, deck, plate } = defineProps<Props>()
+const generatedName = useComponentId('segmented')
+const group = computed(() => ({ name: name ?? generatedName, multiple: false }))
+provide(OPTION_GROUP, group)
+</script>
+
+<template>
+  <fieldset
+    :class="['rkui-segmented', { 'rkui-segmented--deck': deck, 'rkui-segmented--plate': plate }]"
+  >
+    <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/segmented/SegmentedOption.vue

@@ -0,0 +1,61 @@
+<!--
+  One option of a Segmented control: a label around a native radio. The slot is the label text;
+  the `icon` slot (`slot="icon"` in Astro, `<template #icon>` in Vue) holds an optional icon
+  before it. `class` and
+  `style` go on the label; other attributes go on the input.
+
+  @example
+  <SegmentedOption value="dark"><MoonIcon slot="icon" />Dark</SegmentedOption>
+-->
+<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 } from '../../shared/option-slot'
+import { splitAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The value the form sends when this option is chosen. */
+  value: string
+  /** 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, name, checked, disabled } = defineProps<Props>()
+
+// Inside a Vue tree the group's name and input type arrive by inject. Rendered by Astro on its
+// own, the option 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,
+  computed(() => ({ name: NAME_PLACEHOLDER, multiple: true })),
+)
+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 v-bind="pageAttrs().outer">
+    <input
+      v-live-checked
+      :type="group.multiple ? 'checkbox' : 'radio'"
+      :name="name ?? group.name"
+      :value
+      :checked
+      :disabled
+      v-bind="pageAttrs().inner"
+    />
+    <slot name="icon" />
+    <slot />
+  </label>
+</template>

package/src/components/segmented/segmented.css

@@ -0,0 +1,181 @@
+/* Segmented control: a pill group of native radios, one per label, with an optional icon before
+   each label's text. The checked option, and its icon's fill, take --rkui-selected; where anchor
+   positioning is supported, that fill is a pill that slides to the newly checked option. When
+   checking an option restyles the whole page, delay that with afterSlide() (shared/after-slide.js).
+
+   <fieldset class="rkui-segmented">
+     <legend class="rkui-visually-hidden">Theme</legend>
+     <label><input type="radio" name="theme" value="light"> Light</label>
+     …
+   </fieldset> */
+
+.rkui-segmented {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--rkui-space-1);
+  min-inline-size: 0;
+  margin: 0;
+  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-segmented label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rkui-space-2);
+  padding: var(--rkui-space-1) var(--rkui-space-3);
+  border-radius: var(--rkui-radius-pill);
+  font-weight: 600;
+  cursor: pointer;
+  transition: box-shadow var(--rkui-duration-fast) ease;
+}
+
+.rkui-segmented input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.rkui-segmented svg {
+  flex: none;
+  inline-size: 1.25em;
+  block-size: 1.25em;
+  color: inherit;
+  --rkui-icon-stroke: 24;
+}
+
+.rkui-segmented label:hover {
+  box-shadow: inset 0 0 0 var(--rkui-outline-width) var(--rkui-line-unfilled);
+}
+
+.rkui-segmented label:active {
+  box-shadow: var(--rkui-shadow-inset);
+}
+
+.rkui-segmented label:has(:checked) {
+  --rkui-icon-fill: var(--rkui-selected);
+
+  background: var(--rkui-selected);
+  color: var(--rkui-on-selected);
+}
+
+/* The newly checked option dips, then bounces as the pill lands on it. :user-valid only matches
+   once the reader has changed the radio, so an option checked when the page loads, or by a
+   script, doesn't pop. */
+.rkui-segmented:not(.rkui-segmented--deck) label:has(:checked:user-valid) {
+  animation: rkui-segment-pop var(--rkui-duration-slide) ease-out;
+}
+
+@keyframes rkui-segment-pop {
+  35% {
+    scale: 0.94;
+  }
+
+  75% {
+    scale: 1.06;
+  }
+}
+
+/* The sliding pill is the group's ::before, anchored to the checked label. It comes before the
+   labels in tree order, so the labels (positioned too) paint over it. Forced colours keep the
+   per-option Highlight fill below. */
+@supports (anchor-name: --a) {
+  @media (forced-colors: none) {
+    .rkui-segmented:not(.rkui-segmented--deck) {
+      position: relative;
+      anchor-scope: --rkui-segmented-checked;
+    }
+
+    .rkui-segmented:not(.rkui-segmented--deck) label:has(:checked) {
+      anchor-name: --rkui-segmented-checked;
+      background: none;
+    }
+
+    .rkui-segmented:not(.rkui-segmented--deck)::before {
+      content: '';
+      position: absolute;
+      position-anchor: --rkui-segmented-checked;
+      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
+      border-radius: var(--rkui-radius-pill);
+      background: var(--rkui-selected);
+      transition: inset var(--rkui-duration-slide) var(--rkui-ease-snap);
+    }
+  }
+}
+
+/* Deck keys: add .rkui-segmented--deck for a row of raised keys, like a tape deck's. The checked
+   key is pushed in flush with the page (interactive.css), driving past that depth before it
+   settles; the key it replaces springs back up. */
+
+/* Every deck has a plate's frame, centred on where a pushed-in key sits (one shadow offset from
+   a raised key, the way shadows fall). It's invisible unless .rkui-segmented--plate shows it, so
+   the focus band always hugs a rounded frame. Its padding grows with the shadow's depth, so it
+   always has room for the offset. */
+.rkui-segmented--deck {
+  --rkui-key-overshoot: calc(var(--rkui-shadow-depth) * 2px);
+  --rkui-plate-padding: calc(var(--rkui-shadow-depth) * var(--rkui-space-2));
+
+  gap: calc(var(--rkui-depth-gap-scale) * var(--rkui-space-2));
+  padding: calc(var(--rkui-plate-padding) - var(--rkui-shadow-offset-y))
+    calc(var(--rkui-plate-padding) + var(--rkui-shadow-offset-x))
+    calc(var(--rkui-plate-padding) + var(--rkui-shadow-offset-y))
+    calc(var(--rkui-plate-padding) - var(--rkui-shadow-offset-x));
+  border: var(--rkui-outline-width) solid transparent;
+  border-radius: var(--rkui-radius);
+  background: none;
+}
+
+.rkui-segmented--deck label {
+  padding: var(--rkui-space-2) var(--rkui-space-4);
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-raised);
+  box-shadow: var(--rkui-shadow);
+  transition:
+    translate var(--rkui-duration-spring) var(--rkui-ease-spring),
+    box-shadow var(--rkui-duration-fast) ease;
+}
+
+/* The keyframes move the checked key in, so its translate isn't transitioned as well. They only
+   play when the reader checks it (:user-valid, as for the pop above). */
+.rkui-segmented--deck label:has(:checked) {
+  border-color: var(--rkui-line);
+  transition-property: box-shadow;
+}
+
+.rkui-segmented--deck label:has(:checked:user-valid) {
+  animation: rkui-deck-key-in var(--rkui-duration-spring) ease-out;
+}
+
+@keyframes rkui-deck-key-in {
+  from {
+    translate: var(--rkui-press-offset-x) var(--rkui-press-offset-y);
+  }
+
+  50% {
+    translate: calc(var(--rkui-shadow-offset-x) + var(--rkui-shadow-dx) * var(--rkui-key-overshoot))
+      calc(var(--rkui-shadow-offset-y) + var(--rkui-shadow-dy) * var(--rkui-key-overshoot));
+  }
+
+  to {
+    translate: var(--rkui-shadow-offset-x) var(--rkui-shadow-offset-y);
+  }
+}
+
+/* Add .rkui-segmented--plate to a deck to show its frame as a flat outlined plate. */
+.rkui-segmented--plate {
+  border-color: var(--rkui-line-unfilled);
+}
+
+/* Forced colours drop the checked fill, so the checked option uses system colours. Without
+   forced-color-adjust, the browser puts a Canvas backplate behind the HighlightText label. */
+@media (forced-colors: active) {
+  .rkui-segmented label:has(:checked) {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+}

package/src/components/select/Select.vue

@@ -0,0 +1,181 @@
+<!--
+  A select: a native `<select>` in the `.rkui-select` frame, inside a Field. The slot holds its
+  `<option>`s. `class` and `style` go on the Field's div when there is a label, hint or error,
+  otherwise on the select; other attributes (name, required, disabled, multiple, ...) go on the
+  select. Without a label, give it an `aria-label`. 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 `selected` applies and is handed to the parent. The
+  server's HTML doesn't show the model's choice, as the options come through the slot: the browser
+  shows it once the component runs, and until then the options marked `selected`.
+
+  Where the browser supports it, the open list is a raised panel in the toon look, and options can
+  hold icons (`<Icon class="rkui-icon rkui-icon--small" aria-hidden="true" />` before the text);
+  elsewhere it is the browser's own list. Add `showSelected` to show the chosen option's icon in
+  the closed select too. A browser without the toon list reads only each option's text and drops
+  the icons and that button, so a Select that wakes up there, inside a widget, draws only the
+  text too, matching what the browser kept.
+
+  @example
+  <Select label="Size" name="size">
+    <option>Small</option>
+    <option>Large</option>
+  </Select>
+  <Select v-model="size" label="Size">…</Select>
+-->
+<script setup lang="ts">
+import { Fragment, h, useAttrs, useSlots, type VNode } from 'vue'
+import Field from '../field/Field.vue'
+import { useComponentId } from '../../shared/component-id'
+import { useLiveValue } from '../../shared/live-value'
+import { modelWithStart } from '../../shared/model-start'
+import { slotText } from '../../shared/slot-html'
+import { controlAttrs } from '../../shared/split-attrs'
+import { startingIndex } from '../../shared/starting-option'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The visible label; none when left out. */
+  label?: string
+  /** A quiet line under the select; none when left out. */
+  hint?: string
+  /** An error line under the select; it also marks the select invalid; none when left out. */
+  error?: string
+  /**
+   * The hover cue: 'ring', 'underline' or 'none'; the background sinks to the page colour when
+   * left out.
+   */
+  hover?: 'ring' | 'underline' | 'none'
+  /**
+   * Show the chosen option's content, icon and all, in the closed select, where the browser draws
+   * the toon list; off when left out.
+   */
+  showSelected?: boolean
+}
+
+const { label, hint, error, hover, showSelected } = defineProps<Props>()
+
+/**
+ * The `<option>` vnodes in a slot written in a `.vue` file, in order, through optgroups and loops.
+ */
+function options(vnodes: VNode[]): VNode[] {
+  return vnodes.flatMap((vnode) => {
+    if (vnode.type === 'option') return [vnode]
+    if (Array.isArray(vnode.children)) return options(vnode.children as VNode[])
+    return []
+  })
+}
+
+/** The text in an option, as it is written. */
+function optionText(option: VNode): string {
+  const { children } = option
+  return typeof children === 'string' ? children : slotText((children ?? []) as VNode[])
+}
+
+/**
+ * An option's value: its `value`, or else its text with the spaces collapsed, as a browser reads
+ * it.
+ */
+function optionValue(option: VNode): string {
+  const value = option.props?.value
+  if (value !== undefined && value !== null) return String(value)
+  return optionText(option).trim().replace(/\s+/g, ' ')
+}
+
+/** Whether an option sets a boolean attribute (`selected`, `disabled`). */
+function hasFlag(option: VNode, name: string): boolean {
+  const value = option.props?.[name]
+  return value !== undefined && value !== false
+}
+
+/**
+ * A select's starting value, read from its options in a slot written in a `.vue` file, as a
+ * browser chooses it: the values of the options marked `selected` for a multiple select, and for
+ * any other the last one marked, or else the first not disabled. A slot from MDX or .astro is
+ * HTML, with no options to read.
+ */
+function selectedValue(vnodes: VNode[], multiple: boolean): string | string[] | undefined {
+  const all = options(vnodes)
+  if (multiple) return all.filter((option) => hasFlag(option, 'selected')).map(optionValue)
+  const marks = all.map((option) => ({
+    selected: hasFlag(option, 'selected'),
+    disabled: hasFlag(option, 'disabled'),
+  }))
+  const chosen = all[startingIndex(marks)]
+  return chosen && optionValue(chosen)
+}
+
+const attrs = useAttrs()
+const multiple = attrs.multiple !== undefined && attrs.multiple !== false
+/**
+ * The chosen option's value, or values with `multiple` (`v-model`); the `selected` ones when left
+ * out.
+ */
+const model = defineModel<string | string[]>()
+const slots = useSlots()
+const selection = modelWithStart(model, () => selectedValue(slots.default?.() ?? [], multiple))
+// In the browser, what was chosen before the select woke up wins.
+const vLiveValue = useLiveValue(selection)
+const id = (attrs.id as string | undefined) ?? useComponentId('select')
+
+/**
+ * Whether the browser's HTML parser keeps more than options and their text in a `<select>`, as
+ * one with the customizable select does. On the server, true.
+ */
+function keepsSelectContent(): boolean {
+  if (typeof document === 'undefined') return true
+  const probe = document.createElement('div')
+  probe.innerHTML = '<select><button></button></select>'
+  return probe.querySelector('button') !== null
+}
+
+/**
+ * Slot vnodes with each option holding just its text, through optgroups and loops, as the
+ * browser's parser leaves them where it keeps nothing else in a `<select>`.
+ */
+function textOnly(vnodes: VNode[]): VNode[] {
+  return vnodes.map((vnode) => {
+    const props = { ...vnode.props, key: vnode.key ?? undefined }
+    if (vnode.type === 'option') return h('option', props, optionText(vnode))
+    if (vnode.type === 'optgroup') return h('optgroup', props, textOnly(vnode.children as VNode[]))
+    if (vnode.type === Fragment) return h(Fragment, props, textOnly(vnode.children as VNode[]))
+    return vnode
+  })
+}
+
+const fullContent = keepsSelectContent()
+
+/**
+ * What the select holds: the options from the slot, after the customizable select's button with
+ * `showSelected`. Where the parser keeps only the options' text, a Select that wakes up over the
+ * server's HTML draws only that, so Vue finds what it draws. The button is made with h(): in a
+ * template Vue warns about a `<button>` inside a `<select>`, and treats `<selectedcontent>` as a
+ * component.
+ */
+const SelectContent = () => {
+  const vnodes = slots.default?.() ?? []
+  if (!fullContent) return textOnly(vnodes)
+  return showSelected ? [h('button', h('selectedcontent')), ...vnodes] : vnodes
+}
+
+/**
+ * The page's attributes, split between the Field and the select. Without a frame the select is
+ * the outermost element, so it takes `class` and `style` too.
+ */
+function pageAttrs() {
+  return controlAttrs(attrs, id, { label, hint, error })
+}
+</script>
+
+<template>
+  <Field :label :for="id" :hint :error v-bind="pageAttrs().field">
+    <select
+      v-live-value
+      v-model="selection"
+      :class="['rkui-select', hover && `rkui-hover-${hover}`]"
+      v-bind="pageAttrs().control"
+    >
+      <SelectContent />
+    </select>
+  </Field>
+</template>