@pienter/ui 0.2.0

package/components/form/number-field/NumberField.vue

@@ -0,0 +1,155 @@
+<template>
+    <div class="pui-field" :data-status="computedStatus">
+        <label class="pui-field__label" :for="inputId">{{ label }}</label>
+        <div class="pui-number-field">
+            <input
+                v-bind="$attrs"
+                :id="inputId"
+                ref="inputRef"
+                class="pui-number-field__input pui-input"
+                type="number"
+                :name="name"
+                :min="min"
+                :max="max"
+                :step="step"
+                :placeholder="placeholder"
+                :required="required"
+                :disabled="disabled"
+                :value="modelValue"
+                :aria-invalid="hasErrors ? 'true' : undefined"
+                :aria-describedby="describedBy"
+                @input="onInput"
+                @blur="emit('blur')"
+            />
+            <div class="pui-number-field__steppers">
+                <button
+                    type="button"
+                    class="pui-number-field__step"
+                    data-direction="increment"
+                    aria-label="Increase"
+                    :disabled="disabled"
+                    @click="handleStep('increment')"
+                >
+                    <span aria-hidden="true">+</span>
+                </button>
+                <button
+                    type="button"
+                    class="pui-number-field__step"
+                    data-direction="decrement"
+                    aria-label="Decrease"
+                    :disabled="disabled"
+                    @click="handleStep('decrement')"
+                >
+                    <span aria-hidden="true">&#x2212;</span>
+                </button>
+            </div>
+        </div>
+        <p v-if="hint" :id="hintId" class="pui-field__hint">{{ hint }}</p>
+        <ul
+            v-if="errors.length"
+            :id="errorsId"
+            class="pui-field__hint"
+            role="alert"
+        >
+            <li v-for="error in errors" :key="error">{{ error }}</li>
+        </ul>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { generateId } from '../../../utils/a11y/id.js';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+    defineProps<{
+        id?: string;
+        label: string;
+        /**
+         * Current numeric value. `undefined` represents an empty input;
+         * `NaN` is also tolerated (the native input renders empty when
+         * its value is not a finite number).
+         */
+        modelValue?: number;
+        name?: string;
+        min?: number;
+        max?: number;
+        step?: number | string;
+        placeholder?: string;
+        required?: boolean;
+        disabled?: boolean;
+        hint?: string;
+        errors?: string[];
+        status?: 'error' | 'success';
+    }>(),
+    {
+        id: undefined,
+        modelValue: undefined,
+        name: undefined,
+        min: undefined,
+        max: undefined,
+        step: undefined,
+        placeholder: undefined,
+        required: false,
+        disabled: false,
+        hint: undefined,
+        errors: () => [],
+        status: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: number];
+    blur: [];
+}>();
+
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const inputId = props.id ?? generateId('input');
+const hintId = `${inputId}-hint`;
+const errorsId = `${inputId}-errors`;
+
+const hasErrors = computed(() => props.errors.length > 0);
+
+const computedStatus = computed(() => {
+    if (props.status) return props.status;
+    if (hasErrors.value) return 'error';
+    return undefined;
+});
+
+const describedBy = computed(() => {
+    const ids: string[] = [];
+    if (props.hint) ids.push(hintId);
+    if (hasErrors.value) ids.push(errorsId);
+    return ids.length > 0 ? ids.join(' ') : undefined;
+});
+
+function onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    // valueAsNumber is NaN when the input is empty or otherwise not a
+    // finite number. We pass it through unchanged so consumers can
+    // distinguish "cleared field" from "explicit 0".
+    emit('update:modelValue', target.valueAsNumber);
+}
+
+function handleStep(direction: 'decrement' | 'increment'): void {
+    if (props.disabled) return;
+    const input = inputRef.value;
+    if (!input) return;
+    if (direction === 'increment') {
+        input.stepUp();
+    } else {
+        input.stepDown();
+    }
+    // Dispatch native input/change events so consumer-attached DOM
+    // listeners observe the same behavior as the Astro controller path.
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    emit('update:modelValue', input.valueAsNumber);
+}
+</script>
+
+<style>
+@import './number-field.css';
+</style>

package/components/form/number-field/number-field.css

@@ -0,0 +1,115 @@
+@layer components {
+    /* ===== pui-number-field (input + flanking step buttons) =====
+   *
+   * NumberField extends the locked Form-primitive scaffold (the outer
+   * `.pui-field` wrapper from `text-input.css`) with an inline-flex
+   * row that hosts the native `<input type="number">` on the left and
+   * two stacked step buttons on the right. The native browser spinner
+   * is suppressed via `appearance: textfield` (Webkit / Firefox)
+   * because we provide our own larger, focus-visible step buttons —
+   * the locked layout choice per the NumberField audit.
+   *
+   * Layout rationale: input + stacked step buttons (increment-top /
+   * decrement-bottom) matches the Reka UI reference and the visual
+   * intuition of "up to grow, down to shrink". The buttons share the
+   * input's border so they read as one integrated control while
+   * keeping each segment independently focusable for keyboard users.
+   */
+
+    .pui-number-field {
+        display: inline-flex;
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .pui-number-field__input {
+        /* Inherits sizing, padding, focus-ring, disabled, and status
+     * recolour from the shared .pui-input rule (text-input.css). The
+     * overrides here only adjust the right-side border radii so the
+     * input segment butts cleanly against the stepper column. */
+        flex: 1;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        /* Suppress the native spinner — we provide our own buttons. */
+        appearance: textfield;
+        -moz-appearance: textfield;
+    }
+
+    .pui-number-field__input::-webkit-inner-spin-button,
+    .pui-number-field__input::-webkit-outer-spin-button {
+        appearance: none;
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    /* Stacked column for the +/- buttons. Sits flush against the
+   * input's right edge; each button takes half the column height. */
+    .pui-number-field__steppers {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .pui-number-field__step {
+        appearance: none;
+        background: var(--bg-clr-surface);
+        color: var(--text-clr-base);
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        /* Avoid double border between the input and the stepper column
+     * (the input already paints the shared edge). */
+        border-left: 0;
+        cursor: pointer;
+        flex: 1;
+        font: inherit;
+        font-weight: var(--fw-bold);
+        line-height: 1;
+        padding: 0 var(--space-2xs);
+        display: grid;
+        place-items: center;
+        /* Ensure the stacked buttons fit the input height even when the
+     * font happens to be larger than the input's line-box. */
+        min-width: 1.75rem;
+    }
+
+    .pui-number-field__step[data-direction='increment'] {
+        border-top-right-radius: var(--radius-sm);
+        /* Avoid double border between the two stacked buttons. */
+        border-bottom: 0;
+    }
+
+    .pui-number-field__step[data-direction='decrement'] {
+        border-bottom-right-radius: var(--radius-sm);
+    }
+
+    .pui-number-field__step:hover:not(:disabled) {
+        background: var(--bg-clr-surface-2);
+    }
+
+    .pui-number-field__step:focus-visible {
+        outline: 3px solid var(--outline-clr-base);
+        outline-offset: 2px;
+        /* Lift the focused button above its neighbours so the outline
+     * isn't clipped by the adjacent button's edge. */
+        position: relative;
+        z-index: 1;
+    }
+
+    .pui-number-field__step:disabled {
+        background: var(--bg-clr-surface-2);
+        color: var(--text-clr-muted);
+        cursor: not-allowed;
+    }
+
+    /* Status states inherited from .pui-field — recolour BOTH the input
+   * and the step buttons so the whole control reads as errored /
+   * succeeded. Mirrors the .pui-input / .pui-textarea status recolour in
+   * text-input.css. */
+    .pui-field[data-status='error'] .pui-number-field__input,
+    .pui-field[data-status='error'] .pui-number-field__step {
+        border-color: var(--border-clr-danger);
+    }
+
+    .pui-field[data-status='success'] .pui-number-field__input,
+    .pui-field[data-status='success'] .pui-number-field__step {
+        border-color: var(--border-clr-success);
+    }
+}

package/components/form/radio-group/RadioGroup.astro

@@ -0,0 +1,105 @@
+---
+import './radio-group.css';
+import { generateId } from '../../../utils/a11y/id.js';
+import type { RadioOption } from './types.js';
+
+interface Props {
+  id?: string;
+  label: string;
+  name: string;
+  options: RadioOption[];
+  value?: string;
+  disabled?: boolean;
+  orientation?: 'vertical' | 'horizontal';
+  hint?: string;
+  errors?: string[];
+  status?: 'error' | 'success';
+}
+
+const {
+  id,
+  label,
+  name,
+  options,
+  value,
+  disabled = false,
+  orientation = 'vertical',
+  hint,
+  errors = [],
+  status,
+  ...rest
+} = Astro.props;
+
+const fieldId = id ?? generateId('radiogroup');
+const hintId = `${fieldId}-hint`;
+const errorsId = `${fieldId}-errors`;
+
+const hasErrors = errors.length > 0;
+const computedStatus = status ?? (hasErrors ? 'error' : undefined);
+
+const describedByIds: string[] = [];
+if (hint) describedByIds.push(hintId);
+if (hasErrors) describedByIds.push(errorsId);
+const describedBy =
+  describedByIds.length > 0 ? describedByIds.join(' ') : undefined;
+---
+
+<fieldset
+  id={fieldId}
+  class="pui-field"
+  data-status={computedStatus}
+  role="radiogroup"
+  aria-describedby={describedBy}
+  aria-invalid={hasErrors ? 'true' : undefined}
+  {...rest}
+>
+  {
+    /* aria-invalid lives on the <fieldset> (group-level signal) AND, when the
+      Astro mountForm controller is wired, on the first radio. The redundancy
+      is intentional — see CONVENTIONS.md "RadioGroup audit → ARIA
+      expectations" for the rationale. Do NOT remove either binding without
+      coordinating with the form controller. */
+  }
+  <legend class="pui-field__label">{label}</legend>
+  {
+    hint && (
+      <p id={hintId} class="pui-field__hint">
+        {hint}
+      </p>
+    )
+  }
+  <div class="pui-radio-group" data-orientation={orientation}>
+    {
+      options.map((option) => {
+        const isChecked = value === option.value;
+        const isDisabled = option.disabled || disabled;
+        return (
+          <label
+            class="pui-radio-group__item"
+            data-disabled={isDisabled ? 'true' : undefined}
+          >
+            <input
+              class="pui-radio"
+              type="radio"
+              name={name}
+              value={option.value}
+              checked={isChecked}
+              disabled={isDisabled}
+              aria-checked={isChecked ? 'true' : 'false'}
+            />
+            <span class="pui-radio-group__label">{option.label}</span>
+          </label>
+        );
+      })
+    }
+  </div>
+  {
+    hasErrors && (
+      <ul id={errorsId} class="pui-field__hint" role="alert">
+        {errors.map((error) => (
+          <li>{error}</li>
+        ))}
+      </ul>
+    )
+  }
+</fieldset>

package/components/form/radio-group/RadioGroup.vue

@@ -0,0 +1,110 @@
+<template>
+    <fieldset
+        v-bind="$attrs"
+        :id="fieldId"
+        class="pui-field"
+        :data-status="computedStatus"
+        role="radiogroup"
+        :aria-describedby="describedBy"
+        :aria-invalid="hasErrors ? 'true' : undefined"
+    >
+        <!-- aria-invalid lives on the <fieldset> (group-level signal) AND, when the
+       Astro mountForm controller is wired, on the first radio. The redundancy
+       is intentional — see ./AUDIT.md "ARIA
+       expectations" for the rationale. Do NOT remove either binding without
+       coordinating with the form controller. -->
+        <legend class="pui-field__label">{{ label }}</legend>
+        <p v-if="hint" :id="hintId" class="pui-field__hint">{{ hint }}</p>
+        <div class="pui-radio-group" :data-orientation="orientation">
+            <label
+                v-for="option in options"
+                :key="option.value"
+                class="pui-radio-group__item"
+                :data-disabled="
+                    option.disabled || disabled ? 'true' : undefined
+                "
+            >
+                <input
+                    class="pui-radio"
+                    type="radio"
+                    :name="name"
+                    :value="option.value"
+                    :checked="modelValue === option.value"
+                    :disabled="option.disabled || disabled"
+                    :aria-checked="
+                        modelValue === option.value ? 'true' : 'false'
+                    "
+                    @change="emit('update:modelValue', option.value)"
+                />
+                <span class="pui-radio-group__label">{{ option.label }}</span>
+            </label>
+        </div>
+        <ul
+            v-if="errors.length"
+            :id="errorsId"
+            class="pui-field__hint"
+            role="alert"
+        >
+            <li v-for="error in errors" :key="error">{{ error }}</li>
+        </ul>
+    </fieldset>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { generateId } from '../../../utils/a11y/id.js';
+import type { RadioOption } from './types.js';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+    defineProps<{
+        id?: string;
+        label: string;
+        name: string;
+        options: RadioOption[];
+        modelValue?: string;
+        disabled?: boolean;
+        orientation?: 'vertical' | 'horizontal';
+        hint?: string;
+        errors?: string[];
+        status?: 'error' | 'success';
+    }>(),
+    {
+        id: undefined,
+        modelValue: undefined,
+        disabled: false,
+        orientation: 'vertical',
+        hint: undefined,
+        errors: () => [],
+        status: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string];
+}>();
+
+const fieldId = props.id ?? generateId('radiogroup');
+const hintId = `${fieldId}-hint`;
+const errorsId = `${fieldId}-errors`;
+
+const hasErrors = computed(() => props.errors.length > 0);
+
+const computedStatus = computed(() => {
+    if (props.status) return props.status;
+    if (hasErrors.value) return 'error';
+    return undefined;
+});
+
+const describedBy = computed(() => {
+    const ids: string[] = [];
+    if (props.hint) ids.push(hintId);
+    if (hasErrors.value) ids.push(errorsId);
+    return ids.length > 0 ? ids.join(' ') : undefined;
+});
+</script>
+
+<style>
+@import './radio-group.css';
+</style>

package/components/form/radio-group/radio-group.css

@@ -0,0 +1,114 @@
+@layer components {
+    /* ===== pui-radio-group (group container with orientation) =====
+   *
+   * Hosted inside a `<fieldset class="pui-field">` form-primitive scaffold —
+   * legend (label) above, hint after legend, items below, errors below items.
+   * The group container itself only owns layout of the item list; the field
+   * chrome (label / hint / errors / data-status recolour) lives on the
+   * surrounding pui-field per the locked form-primitive wrapper archetype.
+   */
+
+    .pui-radio-group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+    }
+
+    .pui-radio-group[data-orientation='horizontal'] {
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: var(--space-s);
+    }
+
+    /* Each option is a label-wrapping-input pattern: clicking anywhere on the
+   * label area selects the radio. Different from Switch / Checkbox /
+   * TextInput which use <label for> association — radio item labels are
+   * short string content from the option's `label`, label-wrapping is more
+   * compact and well-established for radio lists. */
+    .pui-radio-group__item {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2xs);
+        cursor: pointer;
+        font-size: inherit;
+        /* Override base/forms.css `label { font-weight: var(--fw-semibold) }`:
+     * radio-item labels are body text, not field labels, and inherit the
+     * fieldset's <legend> as the actual field label. */
+        font-weight: var(--fw-regular);
+        /* Override base/forms.css `label { margin-bottom: var(--space-xs) }`:
+     * the surrounding `.pui-radio-group` flex `gap` already governs item
+     * spacing; an inherited margin-bottom would compound and split the gap. */
+        margin-bottom: 0;
+    }
+
+    .pui-radio-group__item[data-disabled='true'] {
+        color: var(--text-clr-muted);
+        cursor: not-allowed;
+    }
+
+    .pui-radio-group__label {
+        /* `line-height: 1` clipped descenders on long labels that wrapped; 1.2
+     * gives breathing room without over-spacing the inline-flex item. */
+        line-height: 1.2;
+    }
+
+    /* ===== pui-radio (individual native input) =====
+   *
+   * Round, custom-styled native <input type="radio"> with a centered inner
+   * dot when checked. Native radios with a shared `name` give us arrow-key
+   * navigation, only-one-selected, and Tab-focuses-selected for free; no
+   * controller required (per the WAI-ARIA APG radiogroup notes — Radix
+   * needs roving-tabindex because they use role="radio" on <div> elements;
+   * we use the native input).
+   */
+
+    .pui-radio {
+        appearance: none;
+        flex: none;
+        margin: 0;
+        width: 1.15em;
+        height: 1.15em;
+        border: var(--stroke-md) solid var(--border-clr-strong);
+        border-radius: 50%;
+        background: var(--bg-clr-surface);
+        display: grid;
+        place-items: center;
+        cursor: pointer;
+        transition:
+            background 0.12s ease,
+            border-color 0.12s ease;
+    }
+
+    .pui-radio:checked {
+        background: var(--bg-clr-brand);
+        border-color: var(--border-clr-brand);
+    }
+
+    .pui-radio:checked::after {
+        content: '';
+        width: 0.45em;
+        height: 0.45em;
+        border-radius: 50%;
+        background: var(--bg-clr-brand-ink);
+    }
+
+    .pui-radio:focus-visible {
+        outline: 3px solid var(--outline-clr-base);
+        outline-offset: 2px;
+    }
+
+    .pui-radio:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    /* Status-driven recolour from the parent pui-field wrapper. */
+    .pui-field[data-status='error'] .pui-radio {
+        border-color: var(--border-clr-danger);
+    }
+
+    .pui-field[data-status='success'] .pui-radio:checked {
+        background: var(--bg-clr-success, var(--bg-clr-brand));
+        border-color: var(--bg-clr-success, var(--border-clr-brand));
+    }
+}

package/components/form/radio-group/types.ts

@@ -0,0 +1,14 @@
+/**
+ * A single radio option entry in a {@link RadioGroup}'s `:options` prop.
+ *
+ * The flat single-component RadioGroup (per design D2 — flat API) takes a
+ * typed array of these instead of compound `<RadioGroupItem>` subcomponents.
+ */
+export type RadioOption = {
+    /** Form value emitted when this option is selected. */
+    value: string;
+    /** Display label rendered next to the radio. */
+    label: string;
+    /** Disable just this option. Group-level disable is out of scope for v1. */
+    disabled?: boolean;
+};

package/components/form/select/Segmented.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="pui-segmented" role="group" :aria-label="label">
+        <button
+            v-for="opt in options"
+            :key="opt.value"
+            class="pui-segmented__item"
+            type="button"
+            :aria-pressed="modelValue === opt.value ? 'true' : 'false'"
+            @click="emit('update:modelValue', opt.value)"
+        >
+            {{ opt.label }}
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        modelValue?: string;
+        options: { value: string; label: string }[];
+        label?: string;
+    }>(),
+    {
+        modelValue: undefined,
+        label: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string];
+}>();
+</script>
+
+<style>
+@import './select.css';
+</style>