@pienter/ui 0.2.0

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

@@ -0,0 +1,165 @@
+@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) ===== */
+
+    .pui-inputgroup {
+        display: flex;
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        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);
+    }
+
+    .pui-inputgroup .pui-input {
+        border: 0;
+        border-radius: 0;
+    }
+
+    .pui-inputgroup .pui-input:focus-visible {
+        box-shadow: none;
+    }
+
+    .pui-inputgroup__addon {
+        display: grid;
+        place-items: center;
+        padding-inline: 0.85em;
+        background: var(--bg-clr-surface-2);
+        font-family: var(--ff-mono);
+        font-size: var(--step--1);
+        border-inline-start: var(--stroke-sm) solid var(--border-clr-base);
+        white-space: nowrap;
+    }
+
+    .pui-inputgroup__addon[data-position='prefix'] {
+        border-inline-start: 0;
+        border-inline-end: var(--stroke-sm) solid var(--border-clr-base);
+    }
+}

package/components/form/textarea/Textarea.astro

@@ -0,0 +1,86 @@
+---
+import './textarea.css';
+import { generateId } from '../../../utils/a11y/id.js';
+
+interface Props {
+  id?: string;
+  label: string;
+  name?: string;
+  value?: string;
+  rows?: number;
+  autocomplete?: string;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  hint?: string;
+  errors?: string[];
+  status?: 'error' | 'success';
+  autoResize?: boolean;
+}
+
+const {
+  id,
+  label,
+  name,
+  value = '',
+  rows,
+  autocomplete,
+  required = false,
+  disabled = false,
+  placeholder,
+  hint,
+  errors = [],
+  status,
+  autoResize = false,
+  ...rest
+} = Astro.props;
+
+const inputId = id ?? generateId('textarea');
+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-status={computedStatus}>
+  <label class="pui-field__label" for={inputId}>
+    {label}
+  </label>
+  <textarea
+    class="pui-textarea"
+    id={inputId}
+    name={name}
+    rows={rows}
+    autocomplete={autocomplete}
+    required={required}
+    disabled={disabled}
+    placeholder={placeholder}
+    style={autoResize ? 'field-sizing: content' : undefined}
+    aria-invalid={hasErrors ? 'true' : undefined}
+    aria-describedby={describedBy}
+    {...rest}>{value}</textarea
+  >
+  {
+    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/textarea/Textarea.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="pui-field" :data-status="computedStatus">
+        <label class="pui-field__label" :for="inputId">{{ label }}</label>
+        <textarea
+            v-bind="$attrs"
+            :id="inputId"
+            class="pui-textarea"
+            :name="name"
+            :rows="rows"
+            :autocomplete="autocomplete"
+            :required="required"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            :style="autoResize ? 'field-sizing: content' : undefined"
+            :aria-invalid="hasErrors ? 'true' : undefined"
+            :aria-describedby="describedBy"
+            :value="modelValue"
+            @input="
+                emit(
+                    'update:modelValue',
+                    ($event.target as HTMLTextAreaElement).value,
+                )
+            "
+            @blur="emit('blur')"
+        />
+        <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: string;
+        name?: string;
+        rows?: number;
+        autocomplete?: string;
+        required?: boolean;
+        disabled?: boolean;
+        placeholder?: string;
+        hint?: string;
+        errors?: string[];
+        status?: 'error' | 'success';
+        autoResize?: boolean;
+    }>(),
+    {
+        id: undefined,
+        name: undefined,
+        rows: undefined,
+        autocomplete: undefined,
+        required: false,
+        disabled: false,
+        placeholder: undefined,
+        hint: undefined,
+        errors: () => [],
+        status: undefined,
+        autoResize: false,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string];
+    blur: [];
+}>();
+
+const inputId = props.id ?? generateId('textarea');
+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 './textarea.css';
+</style>

package/components/form/textarea/textarea.css

@@ -0,0 +1,25 @@
+@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.
+   */
+
+    /* 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 Vue/Astro path, so the
+   * selector matches it directly. Browsers without `field-sizing`
+   * support fall back gracefully to the default fixed-rows/min-height
+   * box. */
+    .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/accordion/Accordion.vue

@@ -0,0 +1,59 @@
+<template>
+    <div ref="rootRef" class="pui-accordion">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { mountDisclosure } from '../../../utils/controllers/disclosure.js';
+
+const props = withDefaults(
+    defineProps<{
+        /**
+         * Single-open mode: opening one item closes the others
+         * (mutually exclusive). When `false`, multiple items can be
+         * open at once. Default `true` matches the most common
+         * Accordion shape (FAQ, settings panels) and aligns with
+         * shadcn / Radix's `type="single"` default.
+         */
+        singleOpen?: boolean;
+    }>(),
+    {
+        singleOpen: true,
+    },
+);
+
+const rootRef = ref<HTMLDivElement | null>(null);
+let teardown: (() => void) | null = null;
+
+function mount(): void {
+    if (!rootRef.value) return;
+    teardown = mountDisclosure(rootRef.value, {
+        singleOpen: props.singleOpen,
+    });
+}
+
+onMounted(mount);
+
+// `singleOpen` is read once at mount time. If a consumer toggles it
+// at runtime we re-mount so the new policy takes effect immediately.
+// This is rare (the prop is typically static per surface) but cheap.
+watch(
+    () => props.singleOpen,
+    () => {
+        teardown?.();
+        teardown = null;
+        mount();
+    },
+);
+
+onBeforeUnmount(() => {
+    teardown?.();
+    teardown = null;
+});
+</script>
+
+<style>
+@import './accordion.css';
+</style>

package/components/layout/accordion/accordion.css

@@ -0,0 +1,87 @@
+@layer components {
+    /* ============================================================
+   * Block — group wrapper. The slot-based API means consumers pass
+   * <details> children directly, so we style descendant <details>
+   * and <summary> to provide the cohesive Accordion look without
+   * requiring child-component classes.
+   * ============================================================ */
+    .pui-accordion {
+        display: flex;
+        flex-direction: column;
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        border-radius: var(--radius-md);
+        background: var(--bg-clr-surface);
+        overflow: hidden; /* clips item border-radius at the corners */
+    }
+
+    /* ============================================================
+   * Item — each direct-child <details>. The Accordion provides the
+   * outer border + radius; items themselves only carry an inter-item
+   * separator.
+   * ============================================================ */
+    .pui-accordion > details {
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+    }
+
+    .pui-accordion > details + details {
+        border-block-start: var(--stroke-sm) solid var(--border-clr-base);
+    }
+
+    /* ============================================================
+   * Summary — the focusable / clickable trigger row. Consumers
+   * write a plain <summary> and inherit the styling.
+   * ============================================================ */
+    .pui-accordion > details > summary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-s);
+        padding: var(--space-2xs) var(--space-s);
+        cursor: pointer;
+        font: inherit;
+        font-weight: var(--fw-semibold);
+        color: var(--text-clr-base);
+        list-style: none; /* hide default disclosure triangle (Firefox) */
+    }
+
+    .pui-accordion > details > summary::-webkit-details-marker {
+        display: none;
+    }
+
+    .pui-accordion > details > summary:hover {
+        background: var(--bg-clr-surface-2);
+    }
+
+    .pui-accordion > details > summary:focus-visible {
+        outline: 3px solid var(--outline-clr-base);
+        outline-offset: 2px;
+    }
+
+    /* ============================================================
+   * Chevron — rendered by the consumer inside <summary>; we provide
+   * the open-state rotation rule keyed off the parent <details>.
+   * Consumers who want a different affordance can override the
+   * descendant selector.
+   * ============================================================ */
+    .pui-accordion > details > summary .pui-icon {
+        flex: 0 0 auto;
+        color: var(--text-clr-muted);
+        transition: transform 180ms ease;
+    }
+
+    .pui-accordion > details[open] > summary .pui-icon {
+        transform: rotate(180deg);
+    }
+
+    /* ============================================================
+   * Panel content — every direct child of <details> that is NOT
+   * the <summary>. Adds padding and a top separator while open.
+   * ============================================================ */
+    .pui-accordion > details > :not(summary) {
+        padding: var(--space-s);
+        border-block-start: var(--stroke-sm) solid var(--border-clr-base);
+        color: var(--text-clr-base);
+    }
+}

package/components/layout/card/Card.astro

@@ -0,0 +1,13 @@
+---
+import './card.css';
+
+interface Props {
+  variant?: 'bordered' | 'brand' | 'muted';
+}
+
+const { variant, ...rest } = Astro.props;
+---
+
+<div class="pui-card" data-variant={variant} {...rest}>
+  <slot />
+</div>

package/components/layout/card/Card.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="pui-card" :data-variant="variant">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        variant?: 'bordered' | 'brand' | 'muted';
+    }>(),
+    {
+        variant: undefined,
+    },
+);
+</script>
+
+<style>
+@import './card.css';
+</style>

package/components/layout/card/card.css

@@ -0,0 +1,55 @@
+@layer components {
+    .pui-card {
+        background: var(--bg-clr-surface);
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        border-radius: var(--radius-md);
+        padding: var(--space-m);
+        display: grid;
+        gap: var(--space-xs);
+    }
+    .pui-card[data-variant='bordered'] {
+        border: var(--stroke-md) solid var(--border-clr-strong);
+        box-shadow: var(--shadow-spark);
+        border-radius: var(--radius-sm);
+    }
+    .pui-card[data-variant='brand'] {
+        background: var(--bg-clr-dark);
+        color: var(--text-clr-inverse);
+    }
+    .pui-card[data-variant='muted'] {
+        background: var(--bg-clr-surface-2);
+        border-color: transparent;
+    }
+    .pui-card__eyebrow {
+        font-family: var(--ff-mono);
+        font-size: var(--step--2);
+        text-transform: uppercase;
+        letter-spacing: var(--ls-eyebrow);
+        color: var(--text-clr-muted);
+    }
+    .pui-card[data-variant='brand'] .pui-card__eyebrow {
+        color: var(--text-clr-brand);
+    }
+    .pui-card__title {
+        font-family: var(--ff-display);
+        font-weight: var(--fw-display);
+        letter-spacing: var(--ls-display);
+        font-size: var(--step-1);
+        margin: 0;
+    }
+    .pui-card__body {
+        color: var(--text-clr-muted);
+        margin: 0;
+    }
+    .pui-card__meta {
+        font-size: var(--step--2);
+        color: var(--text-clr-muted);
+        display: flex;
+        gap: var(--space-xs);
+    }
+    .pui-card__footer {
+        display: flex;
+        gap: var(--space-xs);
+        margin-block-start: var(--space-2xs);
+    }
+}

package/components/layout/collapsible/Collapsible.vue

@@ -0,0 +1,77 @@
+<template>
+    <details ref="rootRef" class="pui-collapsible" :open="open">
+        <summary class="pui-collapsible__trigger">
+            <span class="pui-collapsible__label">
+                <slot name="trigger">{{ label }}</slot>
+            </span>
+            <Icon
+                name="chevron-down"
+                size="sm"
+                class="pui-collapsible__chevron"
+            />
+        </summary>
+        <div class="pui-collapsible__content">
+            <slot />
+        </div>
+    </details>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { mountDisclosure } from '../../../utils/controllers/disclosure.js';
+import Icon from '../../display/icon/Icon.vue';
+
+withDefaults(
+    defineProps<{
+        /**
+         * Controlled open state. When provided the parent owns the value
+         * via `v-model:open`; the component reflects it onto the native
+         * `<details>` `open` attribute. When omitted the native default
+         * (closed) applies until the user clicks the summary, at which
+         * point the browser flips the attribute and the controller's
+         * `onToggle` emits `update:open` so the consumer can pick up the
+         * value if they want to start tracking it.
+         */
+        open?: boolean;
+        /**
+         * Fallback label rendered inside the summary when the `#trigger`
+         * slot is empty. Plain string only — for icons-with-text or
+         * other rich content, supply a `#trigger` slot instead.
+         */
+        label?: string;
+    }>(),
+    {
+        open: undefined,
+        label: '',
+    },
+);
+
+const emit = defineEmits<{
+    'update:open': [open: boolean];
+}>();
+
+const rootRef = ref<HTMLDetailsElement | null>(null);
+let teardown: (() => void) | null = null;
+
+onMounted(() => {
+    if (!rootRef.value) return;
+    // Collapsible is single-disclosure: no `singleOpen` coordination
+    // needed. The controller's only role here is to provide the
+    // standard mount/teardown lifecycle and a normalized callback —
+    // the native `<details>` element does the open/close work itself.
+    teardown = mountDisclosure(rootRef.value, {
+        onToggle: (_target, open) => {
+            emit('update:open', open);
+        },
+    });
+});
+
+onBeforeUnmount(() => {
+    teardown?.();
+    teardown = null;
+});
+</script>
+
+<style>
+@import './collapsible.css';
+</style>