@pienter/ui 0.7.1 → 0.8.0

package/components/feedback/toast/types.ts

@@ -0,0 +1,48 @@
+import type { Ref } from 'vue';
+import type { IconName } from '../../../icons/index.js';
+
+export type ToastTone = 'brand' | 'success' | 'warning' | 'danger';
+
+export type ToastPosition =
+    | 'bottom-right'
+    | 'bottom-center'
+    | 'bottom-left'
+    | 'top-right'
+    | 'top-center'
+    | 'top-left';
+
+export interface ToastOptions {
+    title: string;
+    message?: string;
+    tone?: ToastTone;
+    /** Milliseconds. `0` keeps the toast visible until it is dismissed. */
+    duration?: number;
+    dismissible?: boolean;
+    action?: { label: string; onClick: () => void };
+    icon?: IconName;
+    id?: string;
+}
+
+export interface ToastConfig {
+    maxVisible?: number;
+    defaultDuration?: number;
+    position?: ToastPosition;
+}
+
+export interface ToastItem extends Omit<
+    ToastOptions,
+    'duration' | 'dismissible' | 'id'
+> {
+    id: string;
+    duration: number;
+    dismissible: boolean;
+}
+
+export interface ToastController {
+    readonly visible: Readonly<Ref<readonly ToastItem[]>>;
+    readonly position: Readonly<Ref<ToastPosition>>;
+    show(options: ToastOptions): string;
+    dismiss(id: string): void;
+    dismissAll(): void;
+    configure(config: ToastConfig): void;
+}

package/components/form/block-editor/BlockEditor.vue

@@ -311,7 +311,7 @@ onBeforeUnmount(stopDrag);
         :data-disabled="disabled ? 'true' : undefined"
     >
         <p :id="`${id}-hint`" class="pui-block-editor__hint">
-            Drag to reorder, or use the move buttons.
+            Use the move buttons to reorder, or drag with a pointer.
         </p>
         <ol
             v-if="modelValue.length"
@@ -335,6 +335,7 @@ onBeforeUnmount(stopDrag);
                     <button
                         class="pui-block-editor__drag"
                         type="button"
+                        tabindex="-1"
                         :disabled="disabled || modelValue.length < 2"
                         :aria-label="`Drag ${title(block, index)}`"
                         :aria-describedby="`${id}-hint`"

package/components/form/checkbox/Checkbox.vue

@@ -19,13 +19,21 @@
                 )
             "
         />
-        <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
+        >
         <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"
+            role="status"
         >
             <li v-for="error in errors" :key="error">{{ error }}</li>
         </ul>

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[];

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>

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/select/Select.vue

@@ -1,14 +1,21 @@
 <template>
     <div 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
+        >
         <div class="pui-select">
             <select
                 v-bind="$attrs"
                 :id="inputId"
                 class="pui-select__control"
                 :name="name"
+                :required="required"
                 :disabled="disabled"
                 :value="modelValue"
                 :aria-invalid="hasErrors ? 'true' : undefined"
@@ -40,7 +47,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>
@@ -60,6 +67,7 @@ const props = withDefaults(
         label?: string;
         modelValue?: string;
         name?: string;
+        required?: boolean;
         disabled?: boolean;
         options: { value: string; label: string }[];
         placeholder?: string;
@@ -72,6 +80,7 @@ const props = withDefaults(
         label: undefined,
         modelValue: undefined,
         name: undefined,
+        required: false,
         disabled: false,
         placeholder: undefined,
         hint: undefined,

package/components/form/select/select.css

@@ -2,10 +2,9 @@
     /* ===== pui-select (form-primitive control) =====
    *
    * Wrapped by `.pui-field` (the shared form-primitive scaffold owned by
-   * text-input.css). The status-driven recolour (`error` / `success` border)
+   * `styles/4-components/form-field.css`). The status-driven recolour (`error` / `success` border)
    * is applied by the parent `.pui-field[data-status]` selector below, mirroring
-   * `.pui-input` in text-input.css. Focus ring uses the same box-shadow pattern
-   * as `.pui-input` for visual consistency.
+   * `.pui-input` in form-field.css.
    */
 
     .pui-select {
@@ -20,19 +19,17 @@
         padding: 0.65em 2.4em 0.65em 0.85em;
         font: inherit;
         background: var(--bg-clr-surface);
-        border: var(--stroke-sm) solid var(--border-clr-base);
+        border: var(--stroke-sm) solid var(--border-clr-input);
         border-radius: var(--radius-sm);
         cursor: pointer;
         color: var(--text-clr-base);
-        transition:
-            border-color 0.12s ease,
-            box-shadow 0.12s ease;
+        transition: border-color var(--duration-fast) var(--ease-base);
     }
 
     .pui-select__control:focus-visible {
-        outline: none;
         border-color: var(--border-clr-brand);
-        box-shadow: 0 0 0 3px hsl(from var(--outline-clr-base) h s l / 0.25);
+        outline: var(--outline-width) solid var(--outline-clr-base);
+        outline-offset: var(--outline-offset);
     }
 
     .pui-select__control:disabled {

package/components/form/slider/Slider.vue

@@ -56,7 +56,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/switch/Switch.vue

@@ -25,7 +25,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/tags-input/TagsInput.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
+        >
         <!--
           onWrapperClick only forwards a click on the empty chrome of the field
           to the real <input> below (a larger pointer target). That input is a
@@ -42,6 +50,7 @@
                 :name="name"
                 :placeholder="placeholder"
                 :disabled="disabled || maxReached"
+                :aria-required="required ? 'true' : undefined"
                 :aria-invalid="hasErrors ? 'true' : undefined"
                 :aria-describedby="describedBy"
                 @keydown="onKeydown"
@@ -53,7 +62,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>
@@ -63,6 +72,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { generateId } from '../../../utils/a11y/id.js';
+import { announce } from '../../../utils/a11y/live-region.js';
 
 defineOptions({ inheritAttrs: false });
 
@@ -74,6 +84,8 @@ const props = withDefaults(
         modelValue: string[];
         name?: string;
         placeholder?: string;
+        /** Marks the field; set as `aria-required` on the entry input since the value is the tag list, not the typed text. */
+        required?: boolean;
         disabled?: boolean;
         hint?: string;
         errors?: string[];
@@ -93,6 +105,7 @@ const props = withDefaults(
         id: undefined,
         name: undefined,
         placeholder: undefined,
+        required: false,
         disabled: false,
         hint: undefined,
         errors: () => [],
@@ -153,8 +166,10 @@ function addTag(raw: string): boolean {
 function removeTag(index: number): void {
     if (props.disabled) return;
     if (index < 0 || index >= props.modelValue.length) return;
+    const tag = props.modelValue[index];
     const next = props.modelValue.filter((_, i) => i !== index);
     emit('update:modelValue', next);
+    announce(`Removed ${tag}`);
     // Return focus to the entry input so the keyboard user keeps typing.
     entryRef.value?.focus();
 }

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

@@ -2,7 +2,7 @@
     /* ===== pui-tags-input (flex-wrapping pills + entry input) =====
    *
    * TagsInput extends the locked Form-primitive scaffold (the outer
-   * `.pui-field` wrapper from `text-input.css`) with a flex-wrapping
+   * `.pui-field` wrapper from `styles/4-components/form-field.css`) with a flex-wrapping
    * row that hosts existing tag pills followed by a text input where
    * the user types the next tag. The whole row reads as one
    * integrated control: clicking anywhere lands focus on the entry
@@ -23,19 +23,22 @@
         width: 100%;
         padding: 0.4em 0.55em;
         background: var(--bg-clr-surface);
-        border: var(--stroke-sm) solid var(--border-clr-base);
+        border: var(--stroke-sm) solid var(--border-clr-input);
         border-radius: var(--radius-sm);
         color: var(--text-clr-base);
-        transition:
-            border-color 0.12s ease,
-            box-shadow 0.12s ease;
+        transition: border-color var(--duration-fast) var(--ease-base);
         cursor: text;
     }
 
     .pui-tags-input:focus-within {
-        outline: none;
         border-color: var(--border-clr-brand);
-        box-shadow: 0 0 0 3px hsl(from var(--outline-clr-base) h s l / 0.25);
+    }
+
+    /* The entry is borderless, so the wrapper wears its ring; a focused
+       remove button keeps its own. */
+    .pui-tags-input:has(.pui-tags-input__entry:focus-visible) {
+        outline: var(--outline-width) solid var(--outline-clr-base);
+        outline-offset: var(--outline-offset);
     }
 
     .pui-tags-input[data-disabled='true'] {
@@ -59,7 +62,8 @@
         display: inline-flex;
         align-items: center;
         gap: var(--space-3xs);
-        padding: 0.15em 0.5em;
+        padding-block: 0;
+        padding-inline: var(--space-2xs) var(--space-3xs);
         background: var(--bg-clr-surface-2);
         border: var(--stroke-sm) solid var(--border-clr-base);
         border-radius: var(--radius-pill, 999px);
@@ -84,8 +88,8 @@
         cursor: pointer;
         font: inherit;
         line-height: 1;
-        width: 1.25em;
-        height: 1.25em;
+        min-inline-size: var(--space-m);
+        min-block-size: var(--space-m);
         display: grid;
         place-items: center;
         border-radius: var(--radius-pill, 999px);
@@ -96,8 +100,8 @@
     }
 
     .pui-tags-input__tag-remove:focus-visible {
-        outline: 2px solid var(--outline-clr-base);
-        outline-offset: 1px;
+        outline: var(--outline-width) solid var(--outline-clr-base);
+        outline-offset: var(--outline-offset);
     }
 
     .pui-tags-input__tag-remove:disabled {

package/components/form/text-input/TextInput.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"
@@ -27,7 +35,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>