@pienter/ui 0.2.0

package/components/form/select/Select.astro

@@ -0,0 +1,105 @@
+---
+import './select.css';
+import Icon from '../../display/icon/Icon.astro';
+import { generateId } from '../../../utils/a11y/id.js';
+
+interface Props {
+  id?: string;
+  label?: string;
+  name?: string;
+  value?: string;
+  disabled?: boolean;
+  options: { value: string; label: string }[];
+  placeholder?: string;
+  hint?: string;
+  errors?: string[];
+  status?: 'error' | 'success';
+}
+
+const {
+  id,
+  label,
+  name,
+  value,
+  disabled = false,
+  options,
+  placeholder,
+  hint,
+  errors = [],
+  status,
+  ...rest
+} = Astro.props;
+
+const inputId = id ?? generateId('select');
+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 && (
+      <label class="pui-field__label" for={inputId}>
+        {label}
+      </label>
+    )
+  }
+  <div class="pui-select">
+    <select
+      class="pui-select__control"
+      id={inputId}
+      name={name}
+      disabled={disabled}
+      aria-invalid={hasErrors ? 'true' : undefined}
+      aria-describedby={describedBy}
+      {...rest}
+    >
+      {
+        placeholder && (
+          <option
+            value=""
+            disabled
+            hidden
+            selected={value === undefined || value === ''}
+          >
+            {placeholder}
+          </option>
+        )
+      }
+      {
+        options.map((opt) => (
+          <option value={opt.value} selected={value === opt.value}>
+            {opt.label}
+          </option>
+        ))
+      }
+    </select>
+    <span class="pui-select__caret" aria-hidden="true">
+      <Icon name="chevron-down" size="sm" />
+    </span>
+  </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>

package/components/form/select/Select.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="pui-field" :data-status="computedStatus">
+        <label v-if="label" class="pui-field__label" :for="inputId">{{
+            label
+        }}</label>
+        <div class="pui-select">
+            <select
+                v-bind="$attrs"
+                :id="inputId"
+                class="pui-select__control"
+                :name="name"
+                :disabled="disabled"
+                :value="modelValue"
+                :aria-invalid="hasErrors ? 'true' : undefined"
+                :aria-describedby="describedBy"
+                @change="
+                    emit(
+                        'update:modelValue',
+                        ($event.target as HTMLSelectElement).value,
+                    )
+                "
+            >
+                <option v-if="placeholder" value="" disabled hidden>
+                    {{ placeholder }}
+                </option>
+                <option
+                    v-for="opt in options"
+                    :key="opt.value"
+                    :value="opt.value"
+                >
+                    {{ opt.label }}
+                </option>
+            </select>
+            <span class="pui-select__caret" aria-hidden="true">
+                <Icon name="chevron-down" size="sm" />
+            </span>
+        </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 } from 'vue';
+import { generateId } from '../../../utils/a11y/id.js';
+import Icon from '../../display/icon/Icon.vue';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+    defineProps<{
+        id?: string;
+        label?: string;
+        modelValue?: string;
+        name?: string;
+        disabled?: boolean;
+        options: { value: string; label: string }[];
+        placeholder?: string;
+        hint?: string;
+        errors?: string[];
+        status?: 'error' | 'success';
+    }>(),
+    {
+        id: undefined,
+        label: undefined,
+        modelValue: undefined,
+        name: undefined,
+        disabled: false,
+        placeholder: undefined,
+        hint: undefined,
+        errors: () => [],
+        status: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string];
+}>();
+
+const inputId = props.id ?? generateId('select');
+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 './select.css';
+</style>

package/components/form/select/select.css

@@ -0,0 +1,96 @@
+@layer components {
+    /* ===== 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)
+   * 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-select {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+    }
+
+    .pui-select__control {
+        appearance: none;
+        width: 100%;
+        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-radius: var(--radius-sm);
+        cursor: pointer;
+        color: var(--text-clr-base);
+        transition:
+            border-color 0.12s ease,
+            box-shadow 0.12s ease;
+    }
+
+    .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);
+    }
+
+    .pui-select__control:disabled {
+        background: var(--bg-clr-surface-2);
+        color: var(--text-clr-muted);
+        cursor: not-allowed;
+    }
+
+    .pui-select__caret {
+        position: absolute;
+        right: 0.85em;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+        color: var(--text-clr-muted);
+    }
+
+    /* Status states on parent .pui-field — mirrors `.pui-input` / `.pui-textarea`. */
+
+    .pui-field[data-status='error'] .pui-select__control {
+        border-color: var(--border-clr-danger);
+    }
+
+    .pui-field[data-status='success'] .pui-select__control {
+        border-color: var(--border-clr-success);
+    }
+
+    /* ===== pui-segmented (Segmented control — Phase 4 retrofit) ===== */
+
+    .pui-segmented {
+        display: inline-flex;
+        background: var(--bg-clr-surface-2);
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        border-radius: var(--radius-sm);
+        padding: 3px;
+        gap: 2px;
+    }
+    .pui-segmented__item {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        padding: 0.4em 0.85em;
+        font: inherit;
+        font-size: var(--step--1);
+        font-weight: var(--fw-semibold);
+        color: var(--text-clr-muted);
+        border-radius: calc(var(--radius-sm) - 1px);
+        cursor: pointer;
+        transition:
+            background 0.12s ease,
+            color 0.12s ease;
+    }
+    .pui-segmented__item:hover {
+        color: var(--text-clr-base);
+    }
+    .pui-segmented__item[aria-pressed='true'] {
+        background: var(--bg-clr-surface);
+        color: var(--text-clr-base);
+        box-shadow: 0 1px 2px rgba(15, 21, 48, 0.08);
+    }
+}

package/components/form/slider/Slider.astro

@@ -0,0 +1,205 @@
+---
+import './slider.css';
+import { generateId } from '../../../utils/a11y/id.js';
+
+interface Props {
+  id?: string;
+  label: string;
+  name?: string;
+  /**
+   * Initial value. Pass a `number` for single-thumb mode, a tuple for
+   * range. Astro renders the thumb DOM accordingly; the controller
+   * picks the matching mode at mount time.
+   */
+  value?: number | [number, number];
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  hint?: string;
+  errors?: string[];
+  status?: 'error' | 'success';
+}
+
+const {
+  id,
+  label,
+  name,
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  hint,
+  errors = [],
+  status,
+  ...rest
+} = Astro.props;
+
+const baseId = id ?? generateId('input');
+const hintId = `${baseId}-hint`;
+const errorsId = `${baseId}-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 isRange = Array.isArray(value);
+const values: number[] = isRange ? [value[0], value[1]] : [value as number];
+
+function pct(v: number): number {
+  if (max === min) return 0;
+  return ((v - min) / (max - min)) * 100;
+}
+
+const fillStart = isRange && values.length === 2 ? `${pct(values[0])}%` : '0%';
+const fillEnd =
+  isRange && values.length === 2 ? `${pct(values[1])}%` : `${pct(values[0])}%`;
+
+const trackStyle = `--pui-slider-fill-start: ${fillStart}; --pui-slider-fill-end: ${fillEnd};`;
+---
+
+<div class="pui-field" data-status={computedStatus}>
+  <label class="pui-field__label" for={`${baseId}-thumb-0`}>
+    {label}
+  </label>
+  <div class="pui-slider-shell">
+    <div
+      class="pui-slider"
+      data-pui-slider
+      data-min={String(min)}
+      data-max={String(max)}
+      data-step={String(step)}
+      data-disabled={disabled ? 'true' : undefined}
+      data-range={isRange ? 'true' : undefined}
+      data-initial={JSON.stringify(values)}
+      style={trackStyle}
+      {...rest}
+    >
+      <div class="pui-slider__rail" aria-hidden="true"></div>
+      <div class="pui-slider__fill" aria-hidden="true"></div>
+      {
+        values.map((v, idx) => (
+          <button
+            id={`${baseId}-thumb-${idx}`}
+            type="button"
+            class="pui-slider__thumb"
+            role="slider"
+            aria-valuemin={String(min)}
+            aria-valuemax={String(max)}
+            aria-valuenow={String(v)}
+            aria-valuetext={
+              isRange
+                ? idx === 0
+                  ? `Lower bound: ${v}`
+                  : `Upper bound: ${v}`
+                : String(v)
+            }
+            aria-label={
+              isRange
+                ? idx === 0
+                  ? `${label} (lower bound)`
+                  : `${label} (upper bound)`
+                : label
+            }
+            aria-disabled={disabled ? 'true' : undefined}
+            aria-describedby={idx === 0 ? describedBy : undefined}
+            tabindex={disabled ? -1 : 0}
+            style={`inset-inline-start: ${pct(v)}%`}
+          />
+        ))
+      }
+    </div>
+    {
+      name && !isRange && (
+        <input
+          class="pui-slider__hidden"
+          type="hidden"
+          name={name}
+          value={String(values[0])}
+        />
+      )
+    }
+    {
+      name && isRange && (
+        <Fragment>
+          <input
+            class="pui-slider__hidden"
+            data-bound="lower"
+            type="hidden"
+            name={`${name}_lower`}
+            value={String(values[0])}
+          />
+          <input
+            class="pui-slider__hidden"
+            data-bound="upper"
+            type="hidden"
+            name={`${name}_upper`}
+            value={String(values[1])}
+          />
+        </Fragment>
+      )
+    }
+  </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 { mountSlider } from '@pienter/ui/utils/controllers/slider.js';
+
+  function mountAll(): void {
+    const tracks = document.querySelectorAll<HTMLElement>('[data-pui-slider]');
+    tracks.forEach((track) => {
+      if (track.dataset.vSliderMounted === 'true') return;
+      let initial: number | [number, number] | undefined;
+      if (track.dataset.initial) {
+        try {
+          const parsed: unknown = JSON.parse(track.dataset.initial);
+          if (
+            Array.isArray(parsed) &&
+            parsed.length === 2 &&
+            parsed.every((v) => typeof v === 'number')
+          ) {
+            initial = [parsed[0] as number, parsed[1] as number];
+          } else if (
+            Array.isArray(parsed) &&
+            parsed.length === 1 &&
+            typeof parsed[0] === 'number'
+          ) {
+            initial = parsed[0];
+          }
+        } catch {
+          initial = undefined;
+        }
+      }
+      mountSlider(track, { initialValue: initial });
+      track.dataset.vSliderMounted = 'true';
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', mountAll, { once: true });
+  } else {
+    mountAll();
+  }
+</script>