@pienter/ui 0.5.0 → 0.8.0

package/components/form/combobox/Combobox.vue

@@ -1,8 +1,14 @@
 <template>
     <div ref="fieldRef" class="pui-field" :data-status="computedStatus">
-        <label v-if="label" class="pui-field__label" :for="inputId">{{
-            label
-        }}</label>
+        <label v-if="label" class="pui-field__label" :for="inputId"
+            >{{ label
+            }}<span
+                v-if="required"
+                class="pui-field__required"
+                aria-hidden="true"
+                >*</span
+            ></label
+        >
         <input
             v-bind="$attrs"
             :id="inputId"
@@ -77,7 +83,7 @@
             v-if="errors.length"
             :id="errorsId"
             class="pui-field__hint"
-            role="alert"
+            role="status"
         >
             <li v-for="error in errors" :key="error">{{ error }}</li>
         </ul>
@@ -144,7 +150,7 @@ const props = withDefaults(
         hint?: string;
         /**
          * Validation errors. Renders as a list under the input with
-         * `role="alert"` and toggles `aria-invalid="true"` plus the
+         * `role="status"` and toggles `aria-invalid="true"` plus the
          * `data-status="error"` styling on `.pui-field`.
          */
         errors?: string[];
@@ -278,6 +284,18 @@ const filteredOptions = computed(() => {
     return props.options.filter((opt) => fn(opt, q));
 });
 
+const firstEnabledIndex = computed(() => {
+    const index = filteredOptions.value.findIndex((option) => !option.disabled);
+    return index >= 0 ? index : null;
+});
+
+const lastEnabledIndex = computed(() => {
+    for (let index = filteredOptions.value.length - 1; index >= 0; index -= 1) {
+        if (!filteredOptions.value[index]?.disabled) return index;
+    }
+    return null;
+});
+
 const activeOptionDomId = computed(() => {
     if (activeIndex.value == null) return null;
     return `${listboxId}-opt-${activeIndex.value}`;
@@ -343,8 +361,7 @@ function onInput(event: Event): void {
     isTyping.value = true;
     // First filtered match becomes the active option so Enter has
     // an obvious target. Skip disabled options.
-    const firstEnabled = filteredOptions.value.findIndex((o) => !o.disabled);
-    activeIndex.value = firstEnabled >= 0 ? firstEnabled : null;
+    activeIndex.value = firstEnabledIndex.value;
     if (!isOpen.value) open();
 }
 
@@ -386,12 +403,7 @@ function onKeydown(event: KeyboardEvent): void {
             event.preventDefault();
             if (!isOpen.value) {
                 open();
-                // Defer active-index move until after the popover opens so
-                // the listbox content is visible to scroll into view.
-                const firstEnabled = filteredOptions.value.findIndex(
-                    (o) => !o.disabled,
-                );
-                activeIndex.value = firstEnabled >= 0 ? firstEnabled : null;
+                activeIndex.value = firstEnabledIndex.value;
             } else {
                 moveActive(1);
             }
@@ -400,41 +412,22 @@ function onKeydown(event: KeyboardEvent): void {
             event.preventDefault();
             if (!isOpen.value) {
                 open();
-                const lastEnabled = [...filteredOptions.value]
-                    .map((o, i) => ({ o, i }))
-                    .reverse()
-                    .find(({ o }) => !o.disabled);
-                activeIndex.value = lastEnabled ? lastEnabled.i : null;
+                activeIndex.value = lastEnabledIndex.value;
             } else {
                 moveActive(-1);
             }
             break;
         case 'Home':
-            if (!isOpen.value) return;
-            event.preventDefault();
-            {
-                const firstEnabled = filteredOptions.value.findIndex(
-                    (o) => !o.disabled,
-                );
-                if (firstEnabled >= 0) {
-                    activeIndex.value = firstEnabled;
-                    scrollActiveIntoView();
-                }
-            }
-            break;
         case 'End':
             if (!isOpen.value) return;
             event.preventDefault();
             {
-                let lastEnabled = -1;
-                for (let i = filteredOptions.value.length - 1; i >= 0; i -= 1) {
-                    if (!filteredOptions.value[i]?.disabled) {
-                        lastEnabled = i;
-                        break;
-                    }
-                }
-                if (lastEnabled >= 0) {
-                    activeIndex.value = lastEnabled;
+                const index =
+                    event.key === 'Home'
+                        ? firstEnabledIndex.value
+                        : lastEnabledIndex.value;
+                if (index !== null) {
+                    activeIndex.value = index;
                     scrollActiveIntoView();
                 }
             }

package/components/form/combobox/combobox.css

@@ -3,7 +3,7 @@
    *
    * Combobox is built on top of the form-primitive scaffold (`.pui-field`
    * with `.pui-field__label` / `.pui-field__hint` / status-driven recolour)
-   * owned by `text-input.css`. The input itself uses the shared
+   * owned by `styles/4-components/form-field.css`. The input itself uses the shared
    * `.pui-input` class so its border, padding, focus ring, and
    * disabled state match TextInput / Textarea exactly.
    *

package/components/form/date-input/DateInput.vue

@@ -1,6 +1,14 @@
 <template>
     <div class="pui-field" :data-status="computedStatus">
-        <label class="pui-field__label" :for="inputId">{{ label }}</label>
+        <label class="pui-field__label" :for="inputId"
+            >{{ label
+            }}<span
+                v-if="required"
+                class="pui-field__required"
+                aria-hidden="true"
+                >*</span
+            ></label
+        >
         <input
             v-bind="$attrs"
             :id="inputId"
@@ -28,7 +36,7 @@
             v-if="errors.length"
             :id="errorsId"
             class="pui-field__hint"
-            role="alert"
+            role="status"
         >
             <li v-for="error in errors" :key="error">{{ error }}</li>
         </ul>

package/components/form/date-input/date-input.css

@@ -1,19 +1,4 @@
 @layer components {
-    /* DateInput reuses the shared `.pui-input` rules (sizing, padding,
-   * border, focus ring, disabled, status-driven recolour) that live
-   * alongside `.pui-textarea` in `components/form/text-input/text-input.css`
-   * because the visual shell is identical to TextInput — only the
-   * native input `type` differs (`date` / `time` / `datetime-local`
-   * vs `text`). The browser owns the picker UI; we just style the
-   * input chrome consistently with the rest of the form-primitive
-   * scaffold.
-   *
-   * This file is intentionally a near-empty placeholder following the
-   * Textarea pattern — every form primitive keeps its own CSS file
-   * for layered consistency, even when there are no component-specific
-   * rules. When the fifth-plus form primitive ships and the shared
-   * `.pui-input` rules outgrow `text-input.css`, they'll move into a
-   * dedicated `form-field.css` per the deferred-extraction note in
-   * CONVENTIONS.
-   */
+    /* DateInput reuses `.pui-input` from `styles/4-components/form-field.css`;
+     * only the native `type` differs from TextInput. */
 }

package/components/form/form/Form.vue

@@ -6,17 +6,15 @@
         :aria-busy="busy ? 'true' : undefined"
         @submit.prevent="handleSubmit"
     >
-        <div
+        <Alert
             v-if="topErrors.length > 0"
-            class="pui-form__error-summary"
-            role="alert"
-            aria-live="assertive"
+            tone="danger"
+            title="There was a problem"
         >
-            <p class="pui-form__error-summary-title">There was a problem</p>
-            <ul class="pui-form__error-summary-list">
+            <ul class="pui-form__errors">
                 <li v-for="error in topErrors" :key="error">{{ error }}</li>
             </ul>
-        </div>
+        </Alert>
 
         <slot />
 
@@ -40,9 +38,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import Alert from '../../feedback/alert/Alert.vue';
 import { focusFirstInvalid } from '../../../utils/a11y/focus.js';
-import { announce } from '../../../utils/a11y/live-region.js';
+import { announce, ensureLiveRegion } from '../../../utils/a11y/live-region.js';
 import { type Validator } from '../../../utils/validation/rules.js';
 import {
     validateFormData,
@@ -81,6 +80,8 @@ const emit = defineEmits<{
 
 const formRef = ref<HTMLFormElement | null>(null);
 
+onMounted(ensureLiveRegion);
+
 // Internal client-validation errors. Merged with server-supplied
 // `fieldErrors` for display via the form-primitive children's own
 // `errors` prop pattern (consumer wires them up by name); the summary

package/components/form/form/form.css

@@ -5,29 +5,9 @@
         gap: var(--space-m);
     }
 
-    .pui-form__error-summary {
-        background: var(--bg-clr-danger-soft);
-        border: var(--stroke-sm) solid var(--border-clr-danger);
-        border-radius: var(--radius-sm);
-        padding: var(--space-s) var(--space-m);
-    }
-
-    .pui-form__error-summary-title {
-        font-weight: var(--fw-semibold);
-        color: var(--text-clr-danger);
-        margin-bottom: var(--space-xs);
-    }
-
-    .pui-form__error-summary-list {
-        list-style: disc inside;
-        padding: 0;
+    .pui-form__errors {
         margin: 0;
-        color: var(--text-clr-danger);
-        font-size: var(--step--1);
-    }
-
-    .pui-form__error-summary-list li {
-        margin-block: var(--space-2xs);
+        padding-inline-start: var(--space-s);
     }
 
     .pui-form__status {

package/components/form/input-otp/InputOTP.vue

@@ -34,7 +34,7 @@
             v-if="errors.length"
             :id="errorsId"
             class="pui-field__hint"
-            role="alert"
+            role="status"
         >
             <li v-for="error in errors" :key="error">{{ error }}</li>
         </ul>

package/components/form/input-otp/input-otp.css

@@ -28,7 +28,7 @@
 
     .pui-input-otp__slot {
         /* Inherits sizing, padding, focus-ring, disabled, and status
-     * recolour from the shared .pui-input rule (text-input.css). The
+     * recolour from the shared .pui-input rule (form-field.css). The
      * overrides here narrow the slot to a square box and centre the
      * typed character. */
         width: 2.75rem;

package/components/form/label/label.css

@@ -1,11 +1,2 @@
-/*
- * Label is a near-empty stylesheet. The actual `.pui-field__label` rules
- * live in `components/form/text-input/text-input.css` (the shared form-primitive
- * scaffold). Label exposes the same class as a standalone component for
- * use cases where the form-primitive components' built-in label is not
- * suitable (e.g., labels associated with custom groups or with multiple
- * controls). Importing this file re-imports the scaffold so a
- * standalone Label on a page that does not also use
- * TextInput / Textarea / Select still gets the typography rules.
- */
-@import '../text-input/text-input.css';
+/* `.pui-field__label` is defined by the scaffold in
+ * `styles/4-components/form-field.css`, which the styles entry loads. */

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

@@ -1,6 +1,14 @@
 <template>
     <div class="pui-field" :data-status="computedStatus">
-        <label class="pui-field__label" :for="inputId">{{ label }}</label>
+        <label class="pui-field__label" :for="inputId"
+            >{{ label
+            }}<span
+                v-if="required"
+                class="pui-field__required"
+                aria-hidden="true"
+                >*</span
+            ></label
+        >
         <div class="pui-number-field">
             <input
                 v-bind="$attrs"
@@ -49,7 +57,7 @@
             v-if="errors.length"
             :id="errorsId"
             class="pui-field__hint"
-            role="alert"
+            role="status"
         >
             <li v-for="error in errors" :key="error">{{ error }}</li>
         </ul>
@@ -146,7 +154,6 @@ function handleStep(direction: 'decrement' | 'increment'): void {
     // listeners observe stepper clicks the same as typed edits.
     input.dispatchEvent(new Event('input', { bubbles: true }));
     input.dispatchEvent(new Event('change', { bubbles: true }));
-    emit('update:modelValue', input.valueAsNumber);
 }
 </script>
 

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

@@ -2,7 +2,7 @@
     /* ===== 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
+   * `.pui-field` wrapper from `styles/4-components/form-field.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)
@@ -24,7 +24,7 @@
 
     .pui-number-field__input {
         /* Inherits sizing, padding, focus-ring, disabled, and status
-     * recolour from the shared .pui-input rule (text-input.css). The
+     * recolour from the shared .pui-input rule (form-field.css). The
      * overrides here only adjust the right-side border radii so the
      * input segment butts cleanly against the stepper column. */
         flex: 1;
@@ -102,7 +102,7 @@
     /* 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. */
+   * form-field.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);

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

@@ -40,7 +40,7 @@
             v-if="errors.length"
             :id="errorsId"
             class="pui-field__hint"
-            role="alert"
+            role="status"
         >
             <li v-for="error in errors" :key="error">{{ error }}</li>
         </ul>

package/components/form/record-form/RecordFields.vue

@@ -0,0 +1,128 @@
+<script lang="ts">
+export type { RecordFormField } from './types.js';
+</script>
+
+<script setup lang="ts" generic="T extends object">
+import { computed } from 'vue';
+import TextInput from '../text-input/TextInput.vue';
+import PuiTextarea from '../textarea/Textarea.vue';
+import PuiSelect from '../select/Select.vue';
+import Checkbox from '../checkbox/Checkbox.vue';
+import {
+    readPath,
+    updatePath,
+    type ValidationIssue,
+    type ValuePath,
+} from '../../../utils/cms/index.js';
+import type { RecordFormField } from './types.js';
+import { pathFor, messagesFor } from './fields.js';
+
+const props = withDefaults(
+    defineProps<{
+        modelValue: T;
+        fields: readonly RecordFormField[];
+        issues?: readonly ValidationIssue[];
+        busy?: boolean;
+    }>(),
+    { issues: () => [], busy: false },
+);
+const emit = defineEmits<{
+    'update:modelValue': [value: T];
+    'field-change': [path: ValuePath];
+}>();
+const fieldsWithErrors = computed(() =>
+    props.fields.map((field) => ({
+        field,
+        errors: messagesFor(field, props.issues),
+    })),
+);
+
+function valueFor(field: RecordFormField): unknown {
+    return readPath(props.modelValue, pathFor(field));
+}
+function textFor(field: RecordFormField): string {
+    const value = valueFor(field);
+    return typeof value === 'string' ? value : '';
+}
+function update(field: RecordFormField, value: unknown): void {
+    if (props.busy || field.disabled) return;
+    const path = pathFor(field);
+    emit('update:modelValue', updatePath(props.modelValue, path, value));
+    emit('field-change', path);
+}
+</script>
+
+<template>
+    <div class="pui-record-fields">
+        <template
+            v-for="{ field, errors } in fieldsWithErrors"
+            :key="field.name"
+        >
+            <slot name="before-field" :field="field" />
+            <slot
+                :name="`field:${field.name}`"
+                :field="field"
+                :value="valueFor(field)"
+                :update="(value: unknown) => update(field, value)"
+                :errors="errors"
+                :disabled="busy || !!field.disabled"
+            >
+                <PuiTextarea
+                    v-if="field.type === 'textarea'"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="textFor(field)"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :placeholder="field.placeholder"
+                    :rows="field.rows"
+                    :errors="errors"
+                    @update:model-value="update(field, $event)"
+                />
+                <PuiSelect
+                    v-else-if="field.type === 'select'"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="textFor(field)"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :placeholder="field.placeholder"
+                    :options="field.options"
+                    :errors="errors"
+                    @update:model-value="update(field, $event)"
+                />
+                <Checkbox
+                    v-else-if="field.type === 'checkbox'"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="valueFor(field) === true"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :errors="errors"
+                    @update:model-value="update(field, $event)"
+                />
+                <TextInput
+                    v-else-if="field.type !== 'custom'"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="textFor(field)"
+                    :type="field.type ?? 'text'"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :placeholder="field.placeholder"
+                    :autocomplete="field.autocomplete"
+                    :errors="errors"
+                    @update:model-value="update(field, $event)"
+                />
+            </slot>
+        </template>
+    </div>
+</template>
+
+<style>
+@import './record-form.css';
+</style>

package/components/form/record-form/RecordForm.vue

@@ -0,0 +1,116 @@
+<script lang="ts">
+export type { RecordFormField } from './types.js';
+</script>
+
+<script setup lang="ts" generic="T extends object">
+import { computed } from 'vue';
+import Button from '../../action/button/Button.vue';
+import Form from '../form/Form.vue';
+import RecordFields from './RecordFields.vue';
+import {
+    cloneRecord,
+    type ValidationIssue,
+    type ValuePath,
+} from '../../../utils/cms/index.js';
+import { pathFor, containsPath, messagesFor } from './fields.js';
+import type { RecordFormField } from './types.js';
+
+const props = withDefaults(
+    defineProps<{
+        /** Caller-owned write payload; every supplied property is retained. */
+        modelValue: T;
+        fields: readonly RecordFormField[];
+        issues?: readonly ValidationIssue[];
+        errors?: string[];
+        busy?: boolean;
+        submitLabel?: string;
+        statusMessage?: string;
+    }>(),
+    {
+        issues: () => [],
+        errors: () => [],
+        busy: false,
+        submitLabel: 'Save changes',
+        statusMessage: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: T];
+    'field-change': [path: ValuePath];
+    submit: [value: T];
+}>();
+
+const fieldErrors = computed(() =>
+    Object.fromEntries(
+        props.fields.map((field) => [
+            JSON.stringify(pathFor(field)),
+            messagesFor(field, props.issues),
+        ]),
+    ),
+);
+
+const summary = computed(() => [
+    ...props.errors,
+    ...props.issues.flatMap((issue) => {
+        const field = props.fields.find((field) =>
+            containsPath(pathFor(field), issue.path),
+        );
+        const label = field?.label ?? issue.path.join(' / ');
+        return issue.messages.map((message) =>
+            label ? `${label}: ${message}` : message,
+        );
+    }),
+]);
+
+function submit(): void {
+    if (!props.busy) emit('submit', cloneRecord(props.modelValue));
+}
+</script>
+
+<template>
+    <Form
+        class="pui-record-form"
+        :busy="busy"
+        :errors="summary"
+        :field-errors="fieldErrors"
+        :status-message="statusMessage"
+        @submit="submit"
+    >
+        <slot name="fields">
+            <RecordFields
+                class="pui-record-form__fields"
+                :model-value="modelValue"
+                :fields="fields"
+                :issues="issues"
+                :busy="busy"
+                @update:model-value="emit('update:modelValue', $event)"
+                @field-change="emit('field-change', $event)"
+            >
+                <template
+                    v-for="name in Object.keys($slots).filter(
+                        (name) =>
+                            name === 'before-field' ||
+                            name.startsWith('field:'),
+                    )"
+                    :key="name"
+                    #[name]="scope"
+                >
+                    <slot :name="name" v-bind="scope" />
+                </template>
+            </RecordFields>
+        </slot>
+        <slot />
+        <template #actions>
+            <slot name="actions" :busy="busy">
+                <Button type="submit" variant="primary" :loading="busy">
+                    {{ submitLabel }}
+                </Button>
+            </slot>
+        </template>
+    </Form>
+</template>
+
+<style>
+@import './record-form.css';
+</style>

package/components/form/record-form/fields.ts

@@ -0,0 +1,20 @@
+import type { ValidationIssue, ValuePath } from '../../../utils/cms/index.js';
+import type { RecordFormField } from './types.js';
+
+export function pathFor(field: RecordFormField): ValuePath {
+    return field.path ?? [field.name];
+}
+export function containsPath(parent: ValuePath, child: ValuePath): boolean {
+    return (
+        parent.length <= child.length &&
+        parent.every((part, index) => part === child[index])
+    );
+}
+export function messagesFor(
+    field: RecordFormField,
+    issues: readonly ValidationIssue[],
+): string[] {
+    return issues
+        .filter((issue) => containsPath(pathFor(field), issue.path))
+        .flatMap((issue) => issue.messages);
+}

package/components/form/record-form/record-form.css

@@ -0,0 +1,15 @@
+@layer components {
+    .pui-record-form {
+        gap: var(--space-s);
+    }
+
+    .pui-record-fields {
+        display: grid;
+        grid-template-columns: var(
+            --pui-record-fields-columns,
+            var(--pui-record-form-columns, minmax(0, 1fr))
+        );
+        gap: var(--space-s);
+        min-inline-size: 0;
+    }
+}