@pienter/ui 0.5.0 → 0.8.0

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

@@ -0,0 +1,28 @@
+import type { ValuePath } from '../../../utils/cms/index.js';
+
+interface RecordFieldBase {
+    name: string;
+    label: string;
+    /** Defaults to the literal property name, without splitting dots. */
+    path?: ValuePath;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+}
+
+export type RecordFormField = RecordFieldBase &
+    (
+        | {
+              type?: 'text' | 'email';
+              placeholder?: string;
+              autocomplete?: string;
+          }
+        | { type: 'textarea'; placeholder?: string; rows?: number }
+        | {
+              type: 'select';
+              options: { value: string; label: string }[];
+              placeholder?: string;
+          }
+        | { type: 'checkbox' }
+        | { type: 'custom' }
+    );

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>

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

@@ -1,141 +1,22 @@
 @layer components {
-    /* ===== pui-field (wrapper with label + hint) =====
-   *
-   * Default layout (`data-layout="stacked"` or unset): label above the
-   * control, hint and errors below — one column, vertical flow. Used by
-   * TextInput, Textarea, Select, NumberField, DateInput.
-   *
-   * Inline layout (`data-layout="inline"`): control left, label right
-   * (next to the control), hint and errors below the row spanning both
-   * columns. Used by compact form primitives (Switch, Checkbox,
-   * RadioGroup individual items) where the control is small enough to
-   * sit beside its label without the stacked label-above pattern. The
-   * control is the FIRST DOM child so a label-following-input source
-   * order can be styled via a grid template.
-   */
-
-    .pui-field {
-        display: grid;
-        gap: var(--space-2xs);
-    }
-
-    /* Zero <fieldset>'s user-agent defaults so it can host the pui-field grid
-   * scaffold cleanly. Without this, browsers paint a 2px groove border, add
-   * default block padding, and apply `min-inline-size: min-content` (which
-   * forces the fieldset to never shrink below its widest child). RadioGroup
-   * is the first form-primitive built on <fieldset>; future grouped-control
-   * primitives (checkbox groups, date-range pickers) reuse this carve-out. */
-    .pui-field:where(fieldset) {
-        border: 0;
-        padding: 0;
-        margin: 0;
-        min-inline-size: 0;
-    }
-
-    /* <legend> default rendering ("float" anchor, automatic padding-inline)
-   * misaligns inside a grid <fieldset>; zero those so the legend behaves
-   * like a normal block grid item, allowing `.pui-field`'s row gap to govern
-   * the label-to-control spacing. */
-    .pui-field__label:where(legend) {
-        padding: 0;
-        float: none;
-    }
-
-    .pui-field[data-layout='inline'] {
-        grid-template-columns: max-content 1fr;
-        column-gap: var(--space-xs);
-        align-items: center;
-    }
-
-    .pui-field[data-layout='inline'] .pui-field__label {
-        /* Pointer affordance for clickable label paired with a small control. */
-        cursor: pointer;
-        user-select: none;
-    }
-
-    .pui-field[data-layout='inline'] .pui-field__hint {
-        /* Hint and errors span both columns so they sit below the row. */
-        grid-column: 1 / -1;
-    }
-
-    .pui-field__label {
-        font-size: var(--step--1);
-        font-weight: var(--fw-bold);
-    }
-
-    .pui-field__hint {
-        font-size: var(--step--2);
-        color: var(--text-clr-muted);
-        margin: 0;
-    }
-
-    .pui-field[data-status='error'] .pui-field__hint {
-        color: var(--text-clr-danger);
-    }
-
-    .pui-field[data-status='success'] .pui-field__hint {
-        color: var(--text-clr-success);
-    }
-
-    /* ===== pui-input / pui-textarea (actual controls) ===== */
-
-    .pui-input,
-    .pui-textarea {
-        width: 100%;
-        padding: 0.65em 0.85em;
-        font: inherit;
-        background: var(--bg-clr-surface);
-        border: var(--stroke-sm) solid var(--border-clr-base);
-        border-radius: var(--radius-sm);
-        color: var(--text-clr-base);
-        transition:
-            border-color 0.12s ease,
-            box-shadow 0.12s ease;
-    }
-
-    .pui-textarea {
-        min-height: 6rem;
-        resize: vertical;
-    }
-
-    .pui-input:focus-visible,
-    .pui-textarea: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);
-    }
-
-    .pui-input:disabled,
-    .pui-textarea:disabled {
-        background: var(--bg-clr-surface-2);
-        color: var(--text-clr-muted);
-        cursor: not-allowed;
-    }
-
-    /* Status states on parent .pui-field */
-
-    .pui-field[data-status='error'] .pui-input,
-    .pui-field[data-status='error'] .pui-textarea {
-        border-color: var(--border-clr-danger);
-    }
-
-    .pui-field[data-status='success'] .pui-input,
-    .pui-field[data-status='success'] .pui-textarea {
-        border-color: var(--border-clr-success);
-    }
-
-    /* ===== pui-inputgroup (prefix / suffix addons) ===== */
+    /* The `.pui-field` scaffold and the `.pui-input` surface live in
+     * `styles/4-components/form-field.css`; only the input group is TextInput's. */
 
     .pui-inputgroup {
         display: flex;
-        border: var(--stroke-sm) solid var(--border-clr-base);
+        border: var(--stroke-sm) solid var(--border-clr-input);
         border-radius: var(--radius-sm);
         overflow: hidden;
     }
 
     .pui-inputgroup:focus-within {
         border-color: var(--border-clr-brand);
-        box-shadow: 0 0 0 3px hsl(from var(--outline-clr-base) h s l / 0.25);
+    }
+
+    /* `overflow: hidden` would clip the input's own ring, so the group wears it. */
+    .pui-inputgroup:has(.pui-input:focus-visible) {
+        outline: var(--outline-width) solid var(--outline-clr-base);
+        outline-offset: var(--outline-offset);
     }
 
     .pui-inputgroup .pui-input {
@@ -144,7 +25,7 @@
     }
 
     .pui-inputgroup .pui-input:focus-visible {
-        box-shadow: none;
+        outline: none;
     }
 
     .pui-inputgroup__addon {

package/components/form/textarea/Textarea.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
+        >
         <textarea
             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/textarea/textarea.css

@@ -1,25 +1,9 @@
 @layer components {
-    /* The shared `.pui-textarea` rules (sizing, padding, border, focus,
-   * disabled, status-driven recolour) live alongside `.pui-input` in
-   * `components/form/text-input/text-input.css` because both controls share
-   * the form-primitive scaffold (per CONVENTIONS § Component archetypes
-   * → Form-primitive wrapper). When a fifth+ primitive ships, those
-   * shared rules will move into a dedicated `form-field.css` per the
-   * deferred-extraction note in CONVENTIONS.
-   *
-   * This file only carries Textarea-specific rules that don't fit the
-   * shared scaffold — currently just the `:autoResize` opt-in styling.
-   */
+    /* `.pui-textarea` itself is styled by `styles/4-components/form-field.css`. */
 
-    /* Auto-resize variant — opt-in via the `autoResize` prop, which sets
-   * `style="field-sizing: content"` inline on the <textarea>. The
-   * inline style is the only documented path, so the
-   * selector matches it directly. Browsers without `field-sizing`
-   * support fall back gracefully to the default fixed-rows/min-height
-   * box. */
+    /* `autoResize` sets `style="field-sizing: content"` inline; the box grows
+     * with content, so the manual resize handle is redundant. */
     .pui-textarea[style*='field-sizing'] {
-        /* Vertical resize handle is redundant when content sizing is on;
-     * the box grows with content on its own. */
         resize: none;
     }
 }

package/components/layout/app-layout/AppLayout.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, useId, watch } from 'vue';
+import IconButton from '../../action/button/IconButton.vue';
+import Sidebar from '../../navigation/sidebar/Sidebar.vue';
+import type { SidebarItem } from '../../navigation/sidebar/types.js';
+
+const props = withDefaults(
+    defineProps<{
+        topItems: SidebarItem[];
+        bottomItems?: SidebarItem[];
+        activeHref?: string | null;
+        collapsed?: boolean;
+        collapsedSubmenu?: 'hidden' | 'panel';
+        navigationLabel?: string;
+        drawerLabel?: string;
+        skipLabel?: string;
+        mainId?: string;
+        navigationId?: string;
+    }>(),
+    {
+        bottomItems: () => [],
+        activeHref: null,
+        collapsed: false,
+        collapsedSubmenu: 'hidden',
+        navigationLabel: 'Main navigation',
+        drawerLabel: 'Open navigation',
+        skipLabel: 'Skip to content',
+        mainId: undefined,
+        navigationId: undefined,
+    },
+);
+
+const emit = defineEmits<{ navigate: [event: MouseEvent] }>();
+const drawerOpen = defineModel<boolean>('drawerOpen', { default: false });
+const expandedGroups = defineModel<string[]>('expandedGroups');
+
+const instanceId = useId();
+const resolvedMainId = computed(() => props.mainId ?? `${instanceId}-main`);
+const resolvedNavigationId = computed(
+    () => props.navigationId ?? `${instanceId}-navigation`,
+);
+
+function navigate(event: MouseEvent): void {
+    emit('navigate', event);
+    const target = event.target as Element | null;
+    if (target?.closest('a[data-sidebar-link]')) drawerOpen.value = false;
+}
+
+watch(
+    () => props.activeHref,
+    (next, previous) => {
+        if (next !== previous) drawerOpen.value = false;
+    },
+);
+</script>
+
+<template>
+    <div class="pui-app-layout">
+        <a class="pui-app-layout__skip-link" :href="`#${resolvedMainId}`">
+            {{ skipLabel }}
+        </a>
+        <header class="pui-app-layout__header">
+            <IconButton
+                class="pui-app-layout__drawer-toggle"
+                :label="drawerLabel"
+                name="menu"
+                variant="ghost"
+                size="sm"
+                :aria-expanded="drawerOpen ? 'true' : undefined"
+                :aria-controls="resolvedNavigationId"
+                @click="drawerOpen = true"
+            />
+            <div v-if="$slots.brand" class="pui-app-layout__brand">
+                <slot name="brand" />
+            </div>
+            <div v-if="$slots.tools" class="pui-app-layout__tools">
+                <slot name="tools" />
+            </div>
+        </header>
+        <div class="pui-app-layout__body">
+            <Sidebar
+                :id="resolvedNavigationId"
+                class="pui-app-layout__navigation"
+                :top-items="topItems"
+                :bottom-items="bottomItems"
+                :active-href="activeHref"
+                :collapsed="collapsed"
+                :collapsed-submenu="collapsedSubmenu"
+                :drawer-open="drawerOpen"
+                :expanded-groups="expandedGroups"
+                :aria-label="navigationLabel"
+                @click="navigate"
+                @update:drawer-open="drawerOpen = $event"
+                @update:expanded-groups="expandedGroups = $event"
+            >
+                <template v-if="$slots['navigation-brand']" #brand>
+                    <slot name="navigation-brand" />
+                </template>
+                <template v-if="$slots['navigation-bottom']" #bottom>
+                    <slot name="navigation-bottom" />
+                </template>
+            </Sidebar>
+            <main
+                :id="resolvedMainId"
+                class="pui-app-layout__main"
+                tabindex="-1"
+            >
+                <slot />
+            </main>
+        </div>
+    </div>
+</template>
+
+<style>
+@import './app-layout.css';
+</style>