@pienter/ui 0.2.0

package/components/form/slider/Slider.vue

@@ -0,0 +1,321 @@
+<template>
+    <div class="pui-field" :data-status="computedStatus">
+        <label class="pui-field__label" :for="thumbId(0)">{{ label }}</label>
+        <div class="pui-slider-shell">
+            <div
+                ref="trackRef"
+                class="pui-slider"
+                :data-disabled="disabled ? 'true' : undefined"
+                :data-range="isRange ? 'true' : undefined"
+                :style="trackFillStyle"
+            >
+                <div class="pui-slider__rail" aria-hidden="true"></div>
+                <div class="pui-slider__fill" aria-hidden="true"></div>
+                <button
+                    v-for="(value, idx) in valuesArray"
+                    :id="thumbId(idx)"
+                    :key="idx"
+                    ref="thumbRefs"
+                    type="button"
+                    class="pui-slider__thumb"
+                    role="slider"
+                    :aria-valuemin="min"
+                    :aria-valuemax="max"
+                    :aria-valuenow="value"
+                    :aria-valuetext="ariaValueText(idx, value)"
+                    :aria-label="thumbAriaLabel(idx)"
+                    :aria-disabled="disabled ? 'true' : undefined"
+                    :aria-describedby="idx === 0 ? describedBy : undefined"
+                    :style="{ insetInlineStart: thumbPercent(value) + '%' }"
+                    :tabindex="disabled ? -1 : 0"
+                    @keydown="(e) => onKeydown(e, idx)"
+                    @pointerdown="(e) => onThumbPointerDown(e, idx)"
+                ></button>
+            </div>
+            <input
+                v-if="name && !isRange"
+                type="hidden"
+                :name="name"
+                :value="modelValue as number"
+            />
+            <input
+                v-if="name && isRange"
+                type="hidden"
+                :name="`${name}_lower`"
+                :value="(modelValue as [number, number])[0]"
+            />
+            <input
+                v-if="name && isRange"
+                type="hidden"
+                :name="`${name}_upper`"
+                :value="(modelValue as [number, number])[1]"
+            />
+        </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, onMounted, onBeforeUnmount } from 'vue';
+import { generateId } from '../../../utils/a11y/id.js';
+
+const props = withDefaults(
+    defineProps<{
+        id?: string;
+        label: string;
+        /**
+         * Current value. Pass a `number` for single-thumb mode, a
+         * `[number, number]` tuple for range (two-thumb) mode. The shape
+         * locks the component into single or range for its lifetime.
+         */
+        modelValue: number | [number, number];
+        name?: string;
+        min?: number;
+        max?: number;
+        step?: number;
+        disabled?: boolean;
+        hint?: string;
+        errors?: string[];
+        status?: 'error' | 'success';
+    }>(),
+    {
+        id: undefined,
+        name: undefined,
+        min: 0,
+        max: 100,
+        step: 1,
+        disabled: false,
+        hint: undefined,
+        errors: () => [],
+        status: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: number | [number, number]];
+}>();
+
+const trackRef = ref<HTMLDivElement | null>(null);
+const thumbRefs = ref<HTMLButtonElement[]>([]);
+
+const baseId = props.id ?? generateId('input');
+const hintId = `${baseId}-hint`;
+const errorsId = `${baseId}-errors`;
+
+function thumbId(idx: number): string {
+    return `${baseId}-thumb-${idx}`;
+}
+
+const isRange = computed(() => Array.isArray(props.modelValue));
+
+const valuesArray = computed<number[]>(() =>
+    Array.isArray(props.modelValue)
+        ? [props.modelValue[0], props.modelValue[1]]
+        : [props.modelValue],
+);
+
+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 thumbPercent(value: number): number {
+    if (props.max === props.min) return 0;
+    return ((value - props.min) / (props.max - props.min)) * 100;
+}
+
+function thumbAriaLabel(idx: number): string {
+    if (!isRange.value) return props.label;
+    return idx === 0
+        ? `${props.label} (lower bound)`
+        : `${props.label} (upper bound)`;
+}
+
+function ariaValueText(idx: number, value: number): string {
+    if (!isRange.value) return String(value);
+    return idx === 0 ? `Lower bound: ${value}` : `Upper bound: ${value}`;
+}
+
+const trackFillStyle = computed(() => {
+    if (isRange.value && Array.isArray(props.modelValue)) {
+        const [v0, v1] = props.modelValue;
+        return {
+            '--pui-slider-fill-start': `${thumbPercent(v0)}%`,
+            '--pui-slider-fill-end': `${thumbPercent(v1)}%`,
+        };
+    }
+    const v = props.modelValue as number;
+    return {
+        '--pui-slider-fill-start': '0%',
+        '--pui-slider-fill-end': `${thumbPercent(v)}%`,
+    };
+});
+
+function clamp(value: number, lo: number, hi: number): number {
+    if (value < lo) return lo;
+    if (value > hi) return hi;
+    return value;
+}
+
+function snapToStep(value: number): number {
+    if (props.step <= 0) return value;
+    const stepped =
+        Math.round((value - props.min) / props.step) * props.step + props.min;
+    const decimals = (props.step.toString().split('.')[1] ?? '').length;
+    return decimals > 0
+        ? Number.parseFloat(stepped.toFixed(decimals))
+        : stepped;
+}
+
+function setValueFor(idx: number, raw: number): void {
+    const next = snapToStep(clamp(raw, props.min, props.max));
+    if (isRange.value && Array.isArray(props.modelValue)) {
+        const [v0, v1] = props.modelValue;
+        if (idx === 0) {
+            emit('update:modelValue', [Math.min(next, v1), v1]);
+        } else {
+            emit('update:modelValue', [v0, Math.max(next, v0)]);
+        }
+    } else {
+        emit('update:modelValue', next);
+    }
+}
+
+function currentValue(idx: number): number {
+    if (Array.isArray(props.modelValue)) {
+        return props.modelValue[idx] ?? props.min;
+    }
+    return props.modelValue;
+}
+
+function onKeydown(event: KeyboardEvent, idx: number): void {
+    if (props.disabled) return;
+    const current = currentValue(idx);
+    let next: number;
+    switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+            next = current + props.step;
+            break;
+        case 'ArrowLeft':
+        case 'ArrowDown':
+            next = current - props.step;
+            break;
+        case 'PageUp':
+            next = current + props.step * 10;
+            break;
+        case 'PageDown':
+            next = current - props.step * 10;
+            break;
+        case 'Home':
+            next = props.min;
+            break;
+        case 'End':
+            next = props.max;
+            break;
+        default:
+            return;
+    }
+    event.preventDefault();
+    setValueFor(idx, next);
+}
+
+let dragIndex = -1;
+let dragPointerId: number | null = null;
+
+function valueFromPointer(event: PointerEvent): number {
+    const track = trackRef.value;
+    if (!track) return props.min;
+    const rect = track.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const ratio = clamp(x / rect.width, 0, 1);
+    return props.min + ratio * (props.max - props.min);
+}
+
+function nearestThumb(target: number): number {
+    if (!isRange.value || !Array.isArray(props.modelValue)) return 0;
+    const [v0, v1] = props.modelValue;
+    return Math.abs(target - v0) <= Math.abs(target - v1) ? 0 : 1;
+}
+
+function onThumbPointerDown(event: PointerEvent, idx: number): void {
+    if (props.disabled) return;
+    if (event.button !== undefined && event.button !== 0) return;
+    dragIndex = idx;
+    dragPointerId = event.pointerId;
+    trackRef.value?.setPointerCapture(event.pointerId);
+    thumbRefs.value[idx]?.focus();
+    event.preventDefault();
+}
+
+function onTrackPointerDown(event: PointerEvent): void {
+    if (props.disabled) return;
+    if (event.button !== undefined && event.button !== 0) return;
+    // Skip thumb hits — the thumb's own pointerdown handles them.
+    if (event.target instanceof HTMLButtonElement) return;
+    const value = valueFromPointer(event);
+    const idx = nearestThumb(value);
+    setValueFor(idx, value);
+    dragIndex = idx;
+    dragPointerId = event.pointerId;
+    trackRef.value?.setPointerCapture(event.pointerId);
+    thumbRefs.value[idx]?.focus();
+    event.preventDefault();
+}
+
+function onPointerMove(event: PointerEvent): void {
+    if (dragIndex === -1) return;
+    if (dragPointerId !== null && event.pointerId !== dragPointerId) return;
+    const value = valueFromPointer(event);
+    setValueFor(dragIndex, value);
+}
+
+function onPointerUp(event: PointerEvent): void {
+    if (dragPointerId !== null && event.pointerId !== dragPointerId) return;
+    if (trackRef.value?.hasPointerCapture(event.pointerId)) {
+        trackRef.value.releasePointerCapture(event.pointerId);
+    }
+    dragIndex = -1;
+    dragPointerId = null;
+}
+
+onMounted(() => {
+    const track = trackRef.value;
+    if (!track) return;
+    track.addEventListener('pointerdown', onTrackPointerDown);
+    track.addEventListener('pointermove', onPointerMove);
+    track.addEventListener('pointerup', onPointerUp);
+    track.addEventListener('pointercancel', onPointerUp);
+});
+
+onBeforeUnmount(() => {
+    const track = trackRef.value;
+    if (!track) return;
+    track.removeEventListener('pointerdown', onTrackPointerDown);
+    track.removeEventListener('pointermove', onPointerMove);
+    track.removeEventListener('pointerup', onPointerUp);
+    track.removeEventListener('pointercancel', onPointerUp);
+});
+</script>
+
+<style>
+@import './slider.css';
+</style>

package/components/form/slider/slider.css

@@ -0,0 +1,115 @@
+@layer components {
+    /* ===== pui-slider (track + rail + fill + thumb buttons) =====
+   *
+   * Slider extends the locked Form-primitive scaffold with a
+   * horizontal track that hosts a faint background rail, a coloured
+   * fill segment representing the current value (or range), and one
+   * or two `<button role="slider">` thumbs. Each thumb is absolutely
+   * positioned via `inset-inline-start: <pct>%`; the controller
+   * (Astro) and Vue's reactive computed both write the same
+   * percentage so the visual is identical across both tiers.
+   *
+   * Layout rationale: rejected the native `<input type="range">`
+   * baseline for two reasons — (a) cross-browser thumb / track
+   * styling is famously inconsistent (each engine ships its own
+   * shadow DOM and pseudo-elements), and (b) range mode (two
+   * thumbs) is impossible without a custom layer. A
+   * button-thumb-on-a-track approach gives us full control over
+   * focus, ARIA, and dual-thumb crossing semantics.
+   */
+
+    .pui-slider-shell {
+        /* Allow the hidden form inputs to live next to the track without
+     * affecting layout. The track owns the visual surface. */
+        display: block;
+        width: 100%;
+    }
+
+    .pui-slider {
+        position: relative;
+        width: 100%;
+        height: 1.5rem;
+        /* Touch-friendly tap surface: the visual track is thin but the
+     * pointer-target spans the full element height. */
+        cursor: pointer;
+        user-select: none;
+        touch-action: none;
+    }
+
+    .pui-slider[data-disabled='true'] {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    .pui-slider__rail {
+        position: absolute;
+        inset-inline: 0;
+        inset-block: 50%;
+        transform: translateY(-50%);
+        height: 0.375rem;
+        background: var(--bg-clr-surface-2);
+        border-radius: var(--radius-pill, 999px);
+    }
+
+    .pui-slider__fill {
+        position: absolute;
+        inset-inline-start: var(--pui-slider-fill-start, 0%);
+        inset-inline-end: calc(100% - var(--pui-slider-fill-end, 0%));
+        inset-block: 50%;
+        transform: translateY(-50%);
+        height: 0.375rem;
+        background: var(--bg-clr-brand);
+        border-radius: var(--radius-pill, 999px);
+    }
+
+    .pui-field[data-status='error'] .pui-slider__fill {
+        background: var(--bg-clr-danger, var(--border-clr-danger));
+    }
+
+    .pui-field[data-status='success'] .pui-slider__fill {
+        background: var(--bg-clr-success, var(--border-clr-success));
+    }
+
+    /* Thumb: native button so it gets keyboard focus / Enter-Space
+   * activation for free. Translated -50% so its visual centre lands
+   * exactly on the percentage point. */
+    .pui-slider__thumb {
+        appearance: none;
+        position: absolute;
+        inset-block: 50%;
+        transform: translate(-50%, -50%);
+        width: 1.25rem;
+        height: 1.25rem;
+        padding: 0;
+        margin: 0;
+        border: var(--stroke-md) solid var(--border-clr-brand);
+        background: var(--bg-clr-surface);
+        border-radius: 50%;
+        cursor: grab;
+        transition:
+            box-shadow 0.12s ease,
+            border-color 0.12s ease;
+    }
+
+    .pui-slider__thumb:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px hsl(from var(--outline-clr-base) h s l / 0.35);
+    }
+
+    .pui-slider__thumb:active {
+        cursor: grabbing;
+    }
+
+    .pui-slider__thumb[aria-disabled='true'] {
+        cursor: not-allowed;
+        opacity: 0.7;
+    }
+
+    .pui-field[data-status='error'] .pui-slider__thumb {
+        border-color: var(--border-clr-danger);
+    }
+
+    .pui-field[data-status='success'] .pui-slider__thumb {
+        border-color: var(--border-clr-success);
+    }
+}

package/components/form/switch/Switch.astro

@@ -0,0 +1,75 @@
+---
+import './switch.css';
+import { generateId } from '../../../utils/a11y/id.js';
+
+interface Props {
+  id?: string;
+  label: string;
+  name?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  hint?: string;
+  errors?: string[];
+  status?: 'error' | 'success';
+}
+
+const {
+  id,
+  label,
+  name,
+  checked = false,
+  disabled = false,
+  hint,
+  errors = [],
+  status,
+  ...rest
+} = Astro.props;
+
+const inputId = id ?? generateId('switch');
+const hintId = `${inputId}-hint`;
+const errorsId = `${inputId}-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;
+---
+
+<div class="pui-field" data-layout="inline" data-status={computedStatus}>
+  <input
+    class="pui-switch"
+    type="checkbox"
+    role="switch"
+    id={inputId}
+    name={name}
+    checked={checked}
+    disabled={disabled}
+    aria-checked={checked ? 'true' : 'false'}
+    aria-invalid={hasErrors ? 'true' : undefined}
+    aria-describedby={describedBy}
+    {...rest}
+  />
+  <label class="pui-field__label" for={inputId}>
+    {label}
+  </label>
+  {
+    hint && (
+      <p id={hintId} class="pui-field__hint">
+        {hint}
+      </p>
+    )
+  }
+  {
+    hasErrors && (
+      <ul id={errorsId} class="pui-field__hint" role="alert">
+        {errors.map((error) => (
+          <li>{error}</li>
+        ))}
+      </ul>
+    )
+  }
+</div>

package/components/form/switch/Switch.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="pui-field" data-layout="inline" :data-status="computedStatus">
+        <input
+            v-bind="$attrs"
+            :id="inputId"
+            class="pui-switch"
+            type="checkbox"
+            role="switch"
+            :name="name"
+            :checked="modelValue"
+            :disabled="disabled"
+            :aria-checked="modelValue ? 'true' : 'false'"
+            :aria-invalid="hasErrors ? 'true' : undefined"
+            :aria-describedby="describedBy"
+            @change="
+                emit(
+                    'update:modelValue',
+                    ($event.target as HTMLInputElement).checked,
+                )
+            "
+        />
+        <label class="pui-field__label" :for="inputId">{{ label }}</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"
+        >
+            <li v-for="error in errors" :key="error">{{ error }}</li>
+        </ul>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { generateId } from '../../../utils/a11y/id.js';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+    defineProps<{
+        id?: string;
+        label: string;
+        modelValue?: boolean;
+        name?: string;
+        disabled?: boolean;
+        hint?: string;
+        errors?: string[];
+        status?: 'error' | 'success';
+    }>(),
+    {
+        id: undefined,
+        modelValue: false,
+        name: undefined,
+        disabled: false,
+        hint: undefined,
+        errors: () => [],
+        status: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean];
+}>();
+
+const inputId = props.id ?? generateId('switch');
+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;
+});
+</script>
+
+<style>
+@import './switch.css';
+</style>

package/components/form/switch/switch.css

@@ -0,0 +1,64 @@
+@layer components {
+    .pui-switch {
+        appearance: none;
+        flex: none;
+        margin: 0;
+        width: 2.4em;
+        height: 1.4em;
+        background: var(--border-clr-base);
+        border: var(--stroke-md) solid var(--border-clr-strong);
+        border-radius: var(--radius-pill);
+        position: relative;
+        transition:
+            background 0.15s ease,
+            border-color 0.15s ease;
+        cursor: pointer;
+    }
+
+    .pui-switch::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 2px;
+        width: 0.95em;
+        height: 0.95em;
+        background: var(--bg-clr-surface);
+        border: var(--stroke-sm) solid var(--border-clr-strong);
+        border-radius: 50%;
+        transform: translateY(-50%);
+        transition: left 0.15s ease;
+    }
+
+    .pui-switch:checked {
+        background: var(--bg-clr-brand);
+    }
+
+    .pui-switch:checked::after {
+        left: calc(100% - 0.95em - 2px);
+    }
+
+    .pui-switch:focus-visible {
+        outline: 3px solid var(--outline-clr-base);
+        outline-offset: 2px;
+    }
+
+    .pui-switch:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    /* Status-driven recolour from the parent pui-field wrapper. */
+    .pui-field[data-status='error'] .pui-switch {
+        border-color: var(--border-clr-danger);
+    }
+
+    .pui-field[data-status='success'] .pui-switch:checked {
+        background: var(--bg-clr-success, var(--bg-clr-brand));
+    }
+
+    /* Disable the cursor + label colour when the input is disabled. */
+    .pui-field:has(.pui-switch:disabled) .pui-field__label {
+        color: var(--text-clr-muted);
+        cursor: not-allowed;
+    }
+}