@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/range/Range.vue

@@ -0,0 +1,169 @@
+<!--
+  A range slider: a native `<input type="range">` with a pill track and an outlined thumb, in a
+  `.rkui-range-control` div inside a Field. `class` and `style` go on the Field's div when there is
+  a label, hint or error, otherwise on the `.rkui-range-control` div; other attributes (name, min,
+  max, step, disabled, aria-label, ...) go on the input. Without a label, give it an `aria-label`.
+
+  With `ticks` a row of tick marks and value labels sits under the slider; match them to min, max
+  and step so the thumb lands on them. In the browser the thumb then snaps from tick to tick with
+  one small overshoot. `valueDisplay` shows the value in the thumb or in a popup over it, raised
+  like a Tooltip or flat. Both follow the slider only in the browser, so in an Astro page a Range
+  with `ticks` or `valueDisplay` needs `client:visible`; without it, it is a plain slider: the
+  thumb jumps, and the value doesn't show. A plain HTML page's `<rkui-range>` doesn't take
+  `ticks`; the page writes the slider's HTML.
+
+  In a `.vue` file, `v-model` is the slider's value, a number. Without one, `value` is the
+  starting value; the middle of the range when left out.
+
+  @example
+  <Range client:visible label="Opacity" value-display="popup" min="0" max="1" step="0.01" value="0.28" />
+  <Range client:visible label="Volume" step="25" ticks={[0, 25, 50, 75, 100]} />
+-->
+<script setup lang="ts">
+import { computed, onMounted, ref, useAttrs } from 'vue'
+import Field from '../field/Field.vue'
+import { useComponentId } from '../../shared/component-id'
+import { useLiveValue } from '../../shared/live-value'
+import { controlAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /** The visible label; none when left out. */
+  label?: string
+  /** A quiet line under the slider; none when left out. */
+  hint?: string
+  /** An error line under the slider; it also marks the input invalid; none when left out. */
+  error?: string
+  /** The values to mark with a tick and a label under the slider; no ticks when left out. */
+  ticks?: number[]
+  /**
+   * Where the value shows while the slider runs in the browser: 'thumb' (inside the thumb, which
+   * widens to fit it), 'popup' (in a raised bubble over the thumb, like a Tooltip, while it is
+   * hovered, dragged or focused from the keyboard) or 'flat-popup' (the same bubble in the page's
+   * colours swapped, with no outline or shadow); not shown when left out.
+   */
+  valueDisplay?: 'thumb' | 'popup' | 'flat-popup'
+}
+
+const { label, hint, error, ticks, valueDisplay } = defineProps<Props>()
+
+const attrs = useAttrs()
+/** The slider's value (`v-model`), a number; the page's `value` attribute when left out. */
+const model = defineModel<number>()
+if (model.value === undefined) {
+  const min = Number(attrs.min ?? 0)
+  const max = Number(attrs.max ?? 100)
+  model.value = Number(attrs.value ?? min + (max - min) / 2)
+}
+// In the browser, the slider's own value wins: what was moved before the Range woke up, or a
+// starting value it clamped or snapped to a step.
+const vLiveValue = useLiveValue(model)
+const id = (attrs.id as string | undefined) ?? useComponentId('range')
+// Set once the Range runs in the browser; until then range.css hides the drawn thumb and popup.
+const live = ref(false)
+onMounted(() => (live.value = true))
+// Whether a pointer is holding the slider: `:active` alone misses a touch in Safari on iPhone.
+const dragging = ref(false)
+
+/** Whether the Range draws its own thumb over the native one, which can't move smoothly. */
+const drawsThumb = computed(() => Boolean(ticks) || valueDisplay === 'thumb')
+
+/** The popup's look, or undefined when the value shows in the thumb or not at all. */
+const popup = computed<'toon' | 'flat' | undefined>(() => {
+  if (valueDisplay === 'popup') return 'toon'
+  if (valueDisplay === 'flat-popup') return 'flat'
+  return undefined
+})
+
+/** How many decimals the value shows: as many as `step` has. */
+function decimals() {
+  return String(attrs.step ?? 1).split('.')[1]?.length ?? 0
+}
+
+/** The slider's bounds, from the page's `min` and `max`. */
+function bounds() {
+  return { min: Number(attrs.min ?? 0), max: Number(attrs.max ?? 100) }
+}
+
+/** The value as the thumb or popup shows it. */
+function shownValue() {
+  return Number(model.value).toFixed(decimals())
+}
+
+/**
+ * Where the thumb sits, as `--rkui-range-fraction` (0 at min, 1 at max), and in the thumb, how many
+ * characters its widest value has, as `--rkui-range-chars`.
+ */
+function vars() {
+  const style: Record<string, number> = {}
+  if (!drawsThumb.value && !valueDisplay) return style
+  const { min, max } = bounds()
+  style['--rkui-range-fraction'] = Math.min(Math.max((model.value! - min) / (max - min), 0), 1)
+  if (valueDisplay === 'thumb') {
+    const widest = [min, max].map((end) => end.toFixed(decimals()).length)
+    style['--rkui-range-chars'] = Math.max(...widest)
+  }
+  return style
+}
+
+/** Marks the slider held until the pointer lets go, anywhere on the page. */
+function grab(event: PointerEvent) {
+  if ((event.target as HTMLInputElement).disabled) return
+  dragging.value = true
+  const letGo = () => {
+    dragging.value = false
+    window.removeEventListener('pointerup', letGo)
+    window.removeEventListener('pointercancel', letGo)
+  }
+  window.addEventListener('pointerup', letGo)
+  window.addEventListener('pointercancel', letGo)
+}
+
+/**
+ * The page's attributes: `class` and `style` for the Field's div when it draws a frame, otherwise
+ * for the `.rkui-range-control` div (`wrapper`); the rest for the input (`wrappedControl`).
+ * `value` is left out: the model holds it. With ticks, the slider's `list` must name their
+ * datalist, so the page's is left out too.
+ */
+function pageAttrs() {
+  const { value, ...rest } = attrs
+  if (ticks) delete rest.list
+  return controlAttrs(rest, id, { label, hint, error })
+}
+</script>
+
+<template>
+  <Field :label :for="id" :hint :error v-bind="pageAttrs().field">
+    <div
+      :class="['rkui-range-control', valueDisplay === 'thumb' && 'rkui-range-control--thumb']"
+      :style="vars()"
+      :data-rkui-live="live ? '' : undefined"
+      :data-rkui-dragging="dragging ? '' : undefined"
+      v-bind="pageAttrs().wrapper"
+    >
+      <input
+        v-live-value
+        v-model.number="model"
+        class="rkui-range"
+        type="range"
+        :list="ticks ? `${id}-ticks` : undefined"
+        v-bind="pageAttrs().wrappedControl"
+        @pointerdown="grab"
+      />
+      <span v-if="drawsThumb" class="rkui-range-thumb" aria-hidden="true">
+        {{ valueDisplay === 'thumb' ? shownValue() : '' }}
+      </span>
+      <span
+        v-if="popup"
+        :class="['rkui-range-popup', popup === 'flat' && 'rkui-range-popup--flat']"
+        aria-hidden="true"
+      >
+        {{ shownValue() }}
+      </span>
+      <datalist v-if="ticks" :id="`${id}-ticks`" class="rkui-range-scale">
+        <option v-for="tick in ticks" :key="tick" :value="tick">{{ tick }}</option>
+      </datalist>
+    </div>
+  </Field>
+</template>

package/src/components/range/range-element.ts

@@ -0,0 +1,8 @@
+// <rkui-range> for plain HTML pages, bundled into dist/rkui.js. Only a range that shows its value
+// needs it: <rkui-range label="Opacity" value-display="popup" min="0" max="1" step="0.01"
+// value="0.28"></rkui-range>. It doesn't take `ticks`, which an attribute can't carry as a list; a
+// page that wants ticks, or no value shown, writes the slider's HTML.
+import { defineElement } from '../../shared/define-element'
+import Range from './Range.vue'
+
+defineElement('rkui-range', Range)

package/src/components/range/range.css

@@ -0,0 +1,315 @@
+/* Range slider: a pill track and an outlined thumb that pops. WebKit and Firefox name the parts
+   differently and one unknown pseudo-element drops a whole selector list, so each part is styled
+   twice; the states set custom properties that both thumbs read.
+
+   Range.vue puts the input in a .rkui-range-control div. To move smoothly, or to hold the value,
+   the thumb is drawn there as .rkui-range-thumb over the native one, which turns invisible but
+   still takes the pointer. A .rkui-range-popup shows the value over the thumb. Range.vue sets
+   --rkui-range-fraction (0 at min, 1 at max) to place them, and marks the div data-rkui-live once
+   it runs in the browser; until then they stay hidden and the native thumb shows.
+
+   <div class="rkui-range-control" style="--rkui-range-fraction: 0.5">
+     <input class="rkui-range" type="range">
+     <span class="rkui-range-thumb" aria-hidden="true"></span>
+   </div> */
+
+.rkui-range,
+.rkui-range-control {
+  --rkui-track-height: 0.75rem;
+  --rkui-thumb-size: 1.5rem;
+}
+
+.rkui-range,
+.rkui-range-thumb {
+  --rkui-thumb-shadow: var(--rkui-shadow);
+  /* How far the thumb sits towards the light. At rest it is one press offset off the track's
+     centre, so pressed in, it is centred. */
+  --rkui-thumb-shift: calc(-1 * var(--rkui-press-offset));
+}
+
+.rkui-range {
+  appearance: none;
+  inline-size: 100%;
+  block-size: calc(var(--rkui-thumb-size) + var(--rkui-space-2));
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.rkui-range::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  block-size: var(--rkui-track-height);
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-raised);
+}
+
+.rkui-range::-moz-range-track {
+  box-sizing: border-box;
+  block-size: var(--rkui-track-height);
+  border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-raised);
+}
+
+/* --rkui-range-thumb-width widens the thumb to hold the value (.rkui-range-control--thumb). */
+.rkui-range::-webkit-slider-thumb {
+  appearance: none;
+  box-sizing: border-box;
+  inline-size: var(--rkui-range-thumb-width, var(--rkui-thumb-size));
+  block-size: var(--rkui-thumb-size);
+  /* WebKit puts the thumb at the top of the track's content box, inside the track border. */
+  margin-block-start: calc(
+    (var(--rkui-track-height) - var(--rkui-thumb-size)) / 2 - var(--rkui-outline-width)
+  );
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-selected);
+  box-shadow: var(--rkui-thumb-shadow);
+  translate: calc(var(--rkui-shadow-dx) * var(--rkui-thumb-shift))
+    calc(var(--rkui-shadow-dy) * var(--rkui-thumb-shift));
+  transition:
+    translate var(--rkui-duration-fast) ease,
+    box-shadow var(--rkui-duration-fast) ease;
+}
+
+.rkui-range::-moz-range-thumb {
+  box-sizing: border-box;
+  inline-size: var(--rkui-range-thumb-width, var(--rkui-thumb-size));
+  block-size: var(--rkui-thumb-size);
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-selected);
+  box-shadow: var(--rkui-thumb-shadow);
+  translate: calc(var(--rkui-shadow-dx) * var(--rkui-thumb-shift))
+    calc(var(--rkui-shadow-dy) * var(--rkui-thumb-shift));
+  transition:
+    translate var(--rkui-duration-fast) ease,
+    box-shadow var(--rkui-duration-fast) ease;
+}
+
+/* The control: the input, with the drawn thumb and the popup over it, and the ticks below. */
+.rkui-range-control {
+  /* How long the drawn thumb and the popup take to reach a new value: at once, or with ticks, a
+     snap with one small overshoot. */
+  --rkui-range-glide: 0s;
+  /* Where the thumb's centre is: its half width in from the track's inner edge, plus its share of
+     the travel. */
+  --rkui-range-thumb-centre: calc(
+    var(--rkui-outline-width) + var(--rkui-range-thumb-width, var(--rkui-thumb-size)) / 2 +
+      var(--rkui-range-fraction, 0) *
+      (100% - 2 * var(--rkui-outline-width) - var(--rkui-range-thumb-width, var(--rkui-thumb-size)))
+  );
+
+  display: grid;
+  inline-size: 100%;
+}
+
+.rkui-range-control:has(> .rkui-range-scale) {
+  --rkui-range-glide: var(--rkui-duration-spring);
+}
+
+.rkui-range-control > * {
+  grid-area: 1 / 1;
+}
+
+.rkui-range-control > .rkui-range-scale {
+  grid-area: 2 / 1;
+}
+
+/* A JetBrains Mono character is 0.6em wide. Only once the Range runs, so the native thumb that
+   shows until then keeps its size. */
+.rkui-range-control--thumb[data-rkui-live] {
+  --rkui-range-thumb-width: max(
+    var(--rkui-thumb-size),
+    calc(
+      var(--rkui-range-chars) * 0.6 * var(--rkui-step--1) + 2 * var(--rkui-space-2) + 2 *
+        var(--rkui-outline-width)
+    )
+  );
+}
+
+/* The drawn thumb, centred on --rkui-range-thumb-centre by its margin, since translate is taken
+   by the pop. */
+.rkui-range-thumb {
+  display: grid;
+  place-items: center;
+  position: relative;
+  inset-inline-start: var(--rkui-range-thumb-centre);
+  align-self: center;
+  justify-self: start;
+  box-sizing: border-box;
+  inline-size: var(--rkui-range-thumb-width, var(--rkui-thumb-size));
+  block-size: var(--rkui-thumb-size);
+  margin-inline-start: calc(var(--rkui-range-thumb-width, var(--rkui-thumb-size)) / -2);
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  border-radius: var(--rkui-radius-pill);
+  background: var(--rkui-selected);
+  color: var(--rkui-on-selected);
+  box-shadow: var(--rkui-thumb-shadow);
+  font-family: var(--rkui-font-mono);
+  font-size: var(--rkui-step--1);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  line-height: 1;
+  pointer-events: none;
+  visibility: hidden;
+  translate: calc(var(--rkui-shadow-dx) * var(--rkui-thumb-shift))
+    calc(var(--rkui-shadow-dy) * var(--rkui-thumb-shift));
+  transition:
+    translate var(--rkui-duration-fast) ease,
+    box-shadow var(--rkui-duration-fast) ease,
+    inset-inline-start var(--rkui-range-glide) var(--rkui-ease-snap);
+}
+
+.rkui-range-control[data-rkui-live] > .rkui-range-thumb {
+  visibility: visible;
+}
+
+.rkui-range-control[data-rkui-live]:has(> .rkui-range-thumb) > .rkui-range::-webkit-slider-thumb {
+  opacity: 0;
+}
+
+.rkui-range-control[data-rkui-live]:has(> .rkui-range-thumb) > .rkui-range::-moz-range-thumb {
+  opacity: 0;
+}
+
+/* The popup: the value in a bubble with a tail, over the thumb, like a tooltip: raised, with the
+   outline and the hard shadow, or with .rkui-range-popup--flat, in the page's colours swapped with
+   neither. Its centre sits on the thumb's: half its width back along the line, which runs the
+   other way in right-to-left text. */
+.rkui-range-popup {
+  --rkui-range-popup-gap: var(--rkui-space-3);
+  --rkui-range-popup-back: -50%;
+  --rkui-range-popup-fill: var(--rkui-raised);
+  --rkui-range-popup-text: var(--rkui-fg);
+  --rkui-range-popup-edge: var(--rkui-line-unfilled);
+
+  position: relative;
+  inset-inline-start: var(--rkui-range-thumb-centre);
+  z-index: 10;
+  align-self: start;
+  justify-self: start;
+  padding: var(--rkui-space-1) var(--rkui-space-2);
+  border: var(--rkui-outline-width) solid var(--rkui-range-popup-edge);
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-range-popup-fill);
+  color: var(--rkui-range-popup-text);
+  font-family: var(--rkui-font-mono);
+  font-size: var(--rkui-step--1);
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  line-height: var(--rkui-line-height-heading);
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  /* Its foot sits the gap above the thumb, which starts half the spare height down. */
+  translate: var(--rkui-range-popup-back)
+    calc(-100% - var(--rkui-range-popup-gap) + var(--rkui-space-1));
+  transition:
+    opacity var(--rkui-duration-fast) ease,
+    translate var(--rkui-duration-fast) ease,
+    visibility 0s var(--rkui-duration-fast),
+    inset-inline-start var(--rkui-range-glide) var(--rkui-ease-snap);
+}
+
+.rkui-range-popup:dir(rtl) {
+  --rkui-range-popup-back: 50%;
+}
+
+.rkui-range-popup--flat {
+  --rkui-range-popup-fill: var(--rkui-fg);
+  --rkui-range-popup-text: var(--rkui-surface);
+  --rkui-range-popup-edge: transparent;
+}
+
+/* The shadow and its edge, as on the tooltip: drop-shadow follows the tail too. */
+.rkui-range-popup:not(.rkui-range-popup--flat) {
+  filter: drop-shadow(
+      var(--rkui-shadow-offset-x) var(--rkui-shadow-offset-y) 0 var(--rkui-shadow-color)
+    )
+    drop-shadow(
+      calc(var(--rkui-shadow-dx) * var(--rkui-outline-width))
+        calc(var(--rkui-shadow-dy) * var(--rkui-outline-width)) 0 var(--rkui-shadow-edge)
+    );
+}
+
+/* The tail: a square turned 45°, with its two lower edges outlined. It is placed with left, not
+   inset-inline-start, to match its physical translate in either direction. */
+.rkui-range-popup::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 100%;
+  left: 50%;
+  inline-size: 0.625rem;
+  block-size: 0.625rem;
+  border: inherit;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  background: inherit;
+  translate: -50% -50%;
+  rotate: 45deg;
+}
+
+.rkui-range-control[data-rkui-live]:is(
+    [data-rkui-dragging],
+    :has(> .rkui-range:is(:active, :focus-visible))
+  )
+  > .rkui-range-popup {
+  opacity: 1;
+  visibility: visible;
+  translate: var(--rkui-range-popup-back) calc(-100% - var(--rkui-range-popup-gap));
+  transition-delay: 0s;
+}
+
+/* Forced colours outline the tail's transparent edges too, so it is left out. */
+@media (forced-colors: active) {
+  .rkui-range-popup::before {
+    display: none;
+  }
+}
+
+/* States, for the native thumb and the drawn one. */
+
+@media (hover: hover) {
+  .rkui-range:hover,
+  .rkui-range-control:has(> .rkui-range:hover) > .rkui-range-thumb {
+    --rkui-thumb-shadow: var(--rkui-shadow-hover);
+    --rkui-thumb-shift: calc(-1 * (var(--rkui-press-offset) + var(--rkui-lift-offset)));
+  }
+
+  .rkui-range-control[data-rkui-live]:has(> .rkui-range:not(:disabled):hover) > .rkui-range-popup {
+    opacity: 1;
+    visibility: visible;
+    translate: var(--rkui-range-popup-back) calc(-100% - var(--rkui-range-popup-gap));
+    transition-delay: 0s;
+  }
+}
+
+.rkui-range:active,
+.rkui-range-control:is([data-rkui-dragging], :has(> .rkui-range:active)) > .rkui-range-thumb {
+  --rkui-thumb-shadow: var(--rkui-shadow-pressed);
+  --rkui-thumb-shift: 0px;
+}
+
+/* The focus band is a spread shadow on the thumb. Forced-colours mode drops shadows, so the
+   transparent outline keeps a visible ring there. */
+.rkui-range:focus-visible,
+.rkui-range-control:has(> .rkui-range:focus-visible) > .rkui-range-thumb {
+  --rkui-thumb-shadow: 0 0 0 var(--rkui-focus-width) var(--rkui-focus);
+}
+
+.rkui-range:focus-visible {
+  outline: var(--rkui-outline-width) solid transparent;
+}
+
+.rkui-range:disabled,
+.rkui-range-control:has(> .rkui-range:disabled) > .rkui-range-thumb {
+  --rkui-thumb-shadow: none;
+  --rkui-thumb-shift: 0px;
+}
+
+.rkui-range-control:has(> .rkui-range:disabled) > .rkui-range-thumb {
+  opacity: 0.45;
+}

package/src/components/range-ticks/range-ticks.css

@@ -0,0 +1,29 @@
+/* Range ticks: the slider's datalist shown as a row of tick marks and value labels under an
+   .rkui-range. Browsers draw their own datalist ticks only on an unstyled slider, so the row is
+   drawn here. Match the ticks to min, max and step so the thumb lands on them.
+
+   <div class="rkui-field">
+     <input class="rkui-range" type="range" list="ticks">
+     <datalist class="rkui-range-scale" id="ticks"><option value="0">0</option>…</datalist>
+   </div> */
+
+.rkui-range-scale {
+  display: flex;
+  justify-content: space-between;
+  inline-size: 100%;
+  /* Half the thumb's width (range.css) plus the track outline: where the thumb's centre stops. */
+  padding-inline: calc(var(--rkui-range-thumb-width, 1.5rem) / 2 + var(--rkui-outline-width));
+}
+
+/* Each option is centred on its point: its negative margins cancel its width in the flex row. */
+.rkui-range-scale option {
+  inline-size: 3rem;
+  margin-inline: -1.5rem;
+  padding: var(--rkui-space-2) 0 0;
+  background: linear-gradient(var(--rkui-muted), var(--rkui-muted)) center top /
+    var(--rkui-outline-width) var(--rkui-space-2) no-repeat;
+  color: var(--rkui-muted);
+  font-size: var(--rkui-step--1);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}

package/src/components/search/Search.vue

@@ -0,0 +1,113 @@
+<!--
+  A search field, in two variants, inside a Field. `class` and `style` go on the Field's div when
+  there is a label, hint or error, otherwise on the outer element (the div, or the form); other
+  attributes (name, placeholder, disabled, ...) go on the input. Without a label the input gets
+  `aria-label="Search"`; pass your own `aria-label` to change it. In a `.vue` file, `v-model` is
+  the input's text. With `v-model`, the parent's value is the starting value; `value` applies
+  only without one.
+
+  @example
+  <Search variant="button" name="q" placeholder="Search" action="/search" />
+  <Search v-model="query" placeholder="Search" />
+-->
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import SearchIcon from '@oneonefour/rkui/icons/magnifying-glass.vue'
+import Button from '../button/Button.vue'
+import Field from '../field/Field.vue'
+import { useComponentId } from '../../shared/component-id'
+import { useLiveValue } from '../../shared/live-value'
+import { controlAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /**
+   * 'icon' (A: a magnifying glass inside the field) or 'button' (B: a filled Search button joined
+   * to the field, in a `<form role="search">`); icon when left out. Open, see DECISIONS ("Special
+   * inputs").
+   */
+  variant?: 'icon' | 'button'
+  /** The button's text, for the 'button' variant; "Search" when left out. */
+  buttonLabel?: string
+  /** The form's action, for the 'button' variant; the current page when left out. */
+  action?: string
+  /** The form's method, for the 'button' variant; get when left out. */
+  method?: 'get' | 'post'
+  /** The visible label; none when left out. */
+  label?: string
+  /** A quiet line under the field; none when left out. */
+  hint?: string
+  /** An error line under the field; it also marks the input invalid; none when left out. */
+  error?: string
+}
+
+const {
+  variant = 'icon',
+  buttonLabel = 'Search',
+  action,
+  method,
+  label,
+  hint,
+  error,
+} = defineProps<Props>()
+
+const attrs = useAttrs()
+/** The input's text (`v-model`); the page's `value` attribute when left out. */
+const model = defineModel<string>()
+if (model.value === undefined) model.value = attrs.value as string | undefined
+// In the browser, what was typed before the search woke up wins.
+const vLiveValue = useLiveValue(model)
+const id = (attrs.id as string | undefined) ?? useComponentId('search')
+
+/**
+ * The page's attributes: `class` and `style` for the Field's div when it draws a frame, otherwise
+ * for the form or div (`wrapper`); the rest for the input (`wrappedControl`). `value` is left out:
+ * the model holds it.
+ */
+function pageAttrs() {
+  const { value, ...rest } = attrs
+  return controlAttrs(rest, id, { label, hint, error })
+}
+
+/** Whether the page disabled the input, which disables the button too. */
+function disabled() {
+  return attrs.disabled !== undefined && attrs.disabled !== false
+}
+</script>
+
+<template>
+  <Field :label :for="id" :hint :error v-bind="pageAttrs().field">
+    <form
+      v-if="variant === 'button'"
+      class="rkui-search-bar"
+      role="search"
+      :action
+      :method
+      v-bind="pageAttrs().wrapper"
+    >
+      <input
+        v-live-value
+        v-model="model"
+        class="rkui-input"
+        type="search"
+        :aria-label="label ? undefined : 'Search'"
+        v-bind="pageAttrs().wrappedControl"
+      />
+      <Button type="submit" :disabled="disabled()">
+        <SearchIcon class="rkui-icon rkui-icon--small" />
+        {{ buttonLabel }}
+      </Button>
+    </form>
+    <div v-else class="rkui-search" v-bind="pageAttrs().wrapper">
+      <input
+        v-live-value
+        v-model="model"
+        class="rkui-input"
+        type="search"
+        :aria-label="label ? undefined : 'Search'"
+        v-bind="pageAttrs().wrappedControl"
+      />
+    </div>
+  </Field>
+</template>