@pienter/ui 0.2.0

package/components/form/tags-input/TagsInput.astro

@@ -0,0 +1,153 @@
+---
+import './tags-input.css';
+import { generateId } from '../../../utils/a11y/id.js';
+
+interface Props {
+  id?: string;
+  label: string;
+  name?: string;
+  /**
+   * Initial tags array. Astro renders the pill DOM and seeds the
+   * controller via `data-initial-tags` so post-mount `mountTagsInput`
+   * stays in sync without re-reading attributes.
+   */
+  value?: string[];
+  placeholder?: string;
+  disabled?: boolean;
+  hint?: string;
+  errors?: string[];
+  status?: 'error' | 'success';
+  maxTags?: number;
+  separators?: string[];
+}
+
+const {
+  id,
+  label,
+  name,
+  value = [],
+  placeholder,
+  disabled = false,
+  hint,
+  errors = [],
+  status,
+  maxTags,
+  separators,
+  ...rest
+} = Astro.props;
+
+const inputId = id ?? generateId('input');
+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;
+
+const maxReached = maxTags !== undefined && value.length >= maxTags;
+---
+
+<div class="pui-field" data-status={computedStatus}>
+  <label class="pui-field__label" for={inputId}>
+    {label}
+  </label>
+  <div
+    class="pui-tags-input"
+    data-pui-tags-input
+    data-initial-tags={JSON.stringify(value)}
+    data-max-tags={maxTags !== undefined ? String(maxTags) : undefined}
+    data-separators={separators ? JSON.stringify(separators) : undefined}
+    data-disabled={disabled ? 'true' : undefined}
+  >
+    {
+      value.map((tag) => (
+        <span class="pui-tags-input__tag" data-tag-value={tag}>
+          <span class="pui-tags-input__tag-label">{tag}</span>
+          <button
+            type="button"
+            class="pui-tags-input__tag-remove"
+            aria-label={`Remove tag ${tag}`}
+            data-tags-remove
+            disabled={disabled}
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </span>
+      ))
+    }
+    <input
+      class="pui-tags-input__entry"
+      type="text"
+      id={inputId}
+      name={name}
+      placeholder={placeholder}
+      disabled={disabled || maxReached}
+      aria-invalid={hasErrors ? 'true' : undefined}
+      aria-describedby={describedBy}
+      {...rest}
+    />
+  </div>
+  {
+    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>
+
+<script>
+  import { mountTagsInput } from '@pienter/ui/utils/controllers/tags-input.js';
+
+  // Hoisted module script — Astro de-dupes across instances. Mount on
+  // every [data-pui-tags-input] wrapper present at DOM-ready.
+  function mountAll(): void {
+    const wrappers = document.querySelectorAll<HTMLElement>(
+      '[data-pui-tags-input]',
+    );
+    wrappers.forEach((wrapper) => {
+      if (wrapper.dataset.vTagsInputMounted === 'true') return;
+      const maxTagsRaw = wrapper.dataset.maxTags;
+      const maxTags =
+        maxTagsRaw === undefined ? undefined : Number.parseInt(maxTagsRaw, 10);
+      let separators: string[] | undefined;
+      if (wrapper.dataset.separators) {
+        try {
+          const parsed: unknown = JSON.parse(wrapper.dataset.separators);
+          if (Array.isArray(parsed)) {
+            separators = parsed.filter(
+              (v): v is string => typeof v === 'string',
+            );
+          }
+        } catch {
+          separators = undefined;
+        }
+      }
+      mountTagsInput(wrapper, {
+        maxTags: Number.isFinite(maxTags) ? maxTags : undefined,
+        separators,
+      });
+      wrapper.dataset.vTagsInputMounted = 'true';
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', mountAll, { once: true });
+  } else {
+    mountAll();
+  }
+</script>

package/components/form/tags-input/TagsInput.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="pui-field" :data-status="computedStatus">
+        <label class="pui-field__label" :for="inputId">{{ label }}</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
+          native, keyboard-focusable control reached directly via Tab, so no
+          keyboard equivalent belongs on this non-interactive wrapper: the div
+          is a layout container, not a control, and must not take a role/handler
+          of its own. Both rules false-positive on this click-to-focus affordance.
+        -->
+        <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
+        <div
+            class="pui-tags-input"
+            :data-disabled="disabled ? 'true' : undefined"
+            @click="onWrapperClick"
+        >
+            <span
+                v-for="(tag, idx) in modelValue"
+                :key="`${tag}-${idx}`"
+                class="pui-tags-input__tag"
+                :data-tag-value="tag"
+            >
+                <span class="pui-tags-input__tag-label">{{ tag }}</span>
+                <button
+                    type="button"
+                    class="pui-tags-input__tag-remove"
+                    :aria-label="`Remove tag ${tag}`"
+                    :disabled="disabled"
+                    @click.stop="removeTag(idx)"
+                >
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </span>
+            <input
+                v-bind="$attrs"
+                :id="inputId"
+                ref="entryRef"
+                v-model="entryText"
+                class="pui-tags-input__entry"
+                type="text"
+                :name="name"
+                :placeholder="placeholder"
+                :disabled="disabled || maxReached"
+                :aria-invalid="hasErrors ? 'true' : undefined"
+                :aria-describedby="describedBy"
+                @keydown="onKeydown"
+                @blur="onBlur"
+            />
+        </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 } from 'vue';
+import { generateId } from '../../../utils/a11y/id.js';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+    defineProps<{
+        id?: string;
+        label: string;
+        /** Current tags array. Vue emits `update:modelValue` on every add / remove. */
+        modelValue: string[];
+        name?: string;
+        placeholder?: string;
+        disabled?: boolean;
+        hint?: string;
+        errors?: string[];
+        status?: 'error' | 'success';
+        /**
+         * Maximum number of tags. Beyond this, the entry input is
+         * disabled (matching the controller's add-no-op behaviour).
+         */
+        maxTags?: number;
+        /**
+         * Characters or `event.key` names that finalize a tag. Default
+         * `[',', 'Enter']`.
+         */
+        separators?: string[];
+    }>(),
+    {
+        id: undefined,
+        name: undefined,
+        placeholder: undefined,
+        disabled: false,
+        hint: undefined,
+        errors: () => [],
+        status: undefined,
+        maxTags: undefined,
+        separators: () => [',', 'Enter'],
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [tags: string[]];
+    blur: [];
+}>();
+
+const entryRef = ref<HTMLInputElement | null>(null);
+const entryText = ref('');
+
+const inputId = props.id ?? generateId('input');
+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;
+});
+
+const maxReached = computed(
+    () =>
+        props.maxTags !== undefined && props.modelValue.length >= props.maxTags,
+);
+
+function isSeparator(event: KeyboardEvent): boolean {
+    for (const sep of props.separators) {
+        if (event.key === sep) return true;
+    }
+    return false;
+}
+
+function addTag(raw: string): boolean {
+    const value = raw.trim();
+    if (!value) return false;
+    if (maxReached.value) return false;
+    if (props.modelValue.includes(value)) return false;
+    emit('update:modelValue', [...props.modelValue, value]);
+    return true;
+}
+
+function removeTag(index: number): void {
+    if (props.disabled) return;
+    if (index < 0 || index >= props.modelValue.length) return;
+    const next = props.modelValue.filter((_, i) => i !== index);
+    emit('update:modelValue', next);
+    // Return focus to the entry input so the keyboard user keeps typing.
+    entryRef.value?.focus();
+}
+
+function onKeydown(event: KeyboardEvent): void {
+    if (props.disabled) return;
+    if (isSeparator(event)) {
+        if (entryText.value.trim().length > 0) {
+            event.preventDefault();
+            if (addTag(entryText.value)) {
+                entryText.value = '';
+            }
+        }
+        return;
+    }
+    if (
+        event.key === 'Backspace' &&
+        entryText.value === '' &&
+        props.modelValue.length > 0
+    ) {
+        event.preventDefault();
+        removeTag(props.modelValue.length - 1);
+    }
+}
+
+function onBlur(): void {
+    // Commit a pending typed tag on blur — matches the canonical
+    // Reka UI / shadcn TagsInput UX where focus-out is treated as a
+    // soft commit so the user doesn't lose what they were typing.
+    if (entryText.value.trim().length > 0) {
+        if (addTag(entryText.value)) {
+            entryText.value = '';
+        }
+    }
+    emit('blur');
+}
+
+function onWrapperClick(event: MouseEvent): void {
+    // Click anywhere in the wrapper (but not on a remove button) lands
+    // focus on the entry input — large click target for touch users.
+    const target = event.target;
+    if (target instanceof HTMLButtonElement) return;
+    if (target instanceof HTMLInputElement) return;
+    entryRef.value?.focus();
+}
+</script>
+
+<style>
+@import './tags-input.css';
+</style>

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

@@ -0,0 +1,128 @@
+@layer components {
+    /* ===== 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
+   * 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
+   * input (handled by Vue / via the click handler in
+   * `mountTagsInput`).
+   *
+   * Layout rationale: rejected the "fixed-height pills + horizontally-
+   * scrolling row" alternative because vertical wrapping reads better
+   * on narrow form columns and avoids hiding tags off-screen. The
+   * entry input is the LAST DOM child so flex-wrap places it after
+   * the pills and pill removal naturally re-flows.
+   */
+
+    .pui-tags-input {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--space-2xs);
+        width: 100%;
+        padding: 0.4em 0.55em;
+        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;
+        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);
+    }
+
+    .pui-tags-input[data-disabled='true'] {
+        background: var(--bg-clr-surface-2);
+        color: var(--text-clr-muted);
+        cursor: not-allowed;
+    }
+
+    /* Status states inherited from .pui-field — recolour to match
+   * .pui-input / .pui-textarea when the parent carries `data-status`. */
+    .pui-field[data-status='error'] .pui-tags-input {
+        border-color: var(--border-clr-danger);
+    }
+
+    .pui-field[data-status='success'] .pui-tags-input {
+        border-color: var(--border-clr-success);
+    }
+
+    /* Tag pill: rounded chip with label + remove button. */
+    .pui-tags-input__tag {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-3xs);
+        padding: 0.15em 0.5em;
+        background: var(--bg-clr-surface-2);
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        border-radius: var(--radius-pill, 999px);
+        font-size: var(--step--1);
+        line-height: 1.2;
+        max-width: 100%;
+    }
+
+    .pui-tags-input__tag-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .pui-tags-input__tag-remove {
+        appearance: none;
+        background: transparent;
+        border: 0;
+        padding: 0;
+        margin: 0;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        line-height: 1;
+        width: 1.25em;
+        height: 1.25em;
+        display: grid;
+        place-items: center;
+        border-radius: var(--radius-pill, 999px);
+    }
+
+    .pui-tags-input__tag-remove:hover:not(:disabled) {
+        background: var(--bg-clr-surface);
+    }
+
+    .pui-tags-input__tag-remove:focus-visible {
+        outline: 2px solid var(--outline-clr-base);
+        outline-offset: 1px;
+    }
+
+    .pui-tags-input__tag-remove:disabled {
+        cursor: not-allowed;
+        color: var(--text-clr-muted);
+    }
+
+    /* Entry input: borderless, flex-grows to fill the trailing slot.
+   * Inherits the .pui-input typography rules in spirit but does NOT
+   * carry the .pui-input class — the wrapper is the visual border /
+   * focus surface. */
+    .pui-tags-input__entry {
+        appearance: none;
+        background: transparent;
+        border: 0;
+        color: inherit;
+        font: inherit;
+        flex: 1;
+        min-width: 6rem;
+        padding: 0.25em 0;
+        outline: none;
+    }
+
+    .pui-tags-input__entry:disabled {
+        cursor: not-allowed;
+    }
+}

package/components/form/text-input/TextInput.astro

@@ -0,0 +1,84 @@
+---
+import './text-input.css';
+import { generateId } from '../../../utils/a11y/id.js';
+
+interface Props {
+  id?: string;
+  label: string;
+  name?: string;
+  type?: string;
+  value?: string;
+  autocomplete?: string;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  hint?: string;
+  errors?: string[];
+  status?: 'error' | 'success';
+}
+
+const {
+  id,
+  label,
+  name,
+  type = 'text',
+  value = '',
+  autocomplete,
+  required = false,
+  disabled = false,
+  placeholder,
+  hint,
+  errors = [],
+  status,
+  ...rest
+} = Astro.props;
+
+const inputId = id ?? generateId('input');
+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>
+  <input
+    class="pui-input"
+    id={inputId}
+    type={type}
+    name={name}
+    value={value}
+    autocomplete={autocomplete}
+    required={required}
+    disabled={disabled}
+    placeholder={placeholder}
+    aria-invalid={hasErrors ? 'true' : undefined}
+    aria-describedby={describedBy}
+    {...rest}
+  />
+  {
+    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/text-input/TextInput.vue

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