@pienter/ui 0.2.0

package/components/feedback/toast/Toast.astro

@@ -0,0 +1,50 @@
+---
+import './toast.css';
+import Icon from '../../display/icon/Icon.astro';
+import type { IconName } from '../../../icons/index.js';
+
+type Tone = 'brand' | 'success' | 'warning' | 'danger';
+
+interface Props {
+  tone?: Tone;
+  title: string;
+  message?: string;
+  dismissible?: boolean;
+  icon?: IconName;
+  action?: { label: string };
+}
+
+const toneIconMap: Record<Tone, IconName> = {
+  brand: 'info',
+  success: 'circle-check',
+  warning: 'alert-triangle',
+  danger: 'circle-alert',
+};
+
+const { tone, title, message, dismissible = true, icon, action } = Astro.props;
+const resolvedIcon: IconName = icon ?? (tone ? toneIconMap[tone] : 'info');
+---
+
+<div class="pui-toast" data-tone={tone}>
+  <span class="pui-toast__icon" aria-hidden="true">
+    <Icon name={resolvedIcon} size="sm" />
+  </span>
+  <div class="pui-toast__body">
+    <p class="pui-toast__title">{title}</p>
+    {message && <p class="pui-toast__msg">{message}</p>}
+  </div>
+  {
+    action && (
+      <button class="pui-toast__action" type="button">
+        {action.label}
+      </button>
+    )
+  }
+  {
+    dismissible && (
+      <button class="pui-toast__close" type="button" aria-label="Close">
+        <Icon name="x" size="sm" />
+      </button>
+    )
+  }
+</div>

package/components/feedback/toast/Toast.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="pui-toast" :data-tone="tone">
+        <span class="pui-toast__icon" aria-hidden="true">
+            <Icon :name="resolvedIcon" size="sm" />
+        </span>
+        <div class="pui-toast__body">
+            <p class="pui-toast__title">{{ title }}</p>
+            <p v-if="message" class="pui-toast__msg">{{ message }}</p>
+        </div>
+        <button
+            v-if="action"
+            class="pui-toast__action"
+            type="button"
+            @click="$emit('action')"
+        >
+            {{ action.label }}
+        </button>
+        <button
+            v-if="dismissible"
+            class="pui-toast__close"
+            type="button"
+            aria-label="Close"
+            @click="$emit('dismiss')"
+        >
+            <Icon name="x" size="sm" />
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../../display/icon/Icon.vue';
+import type { IconName } from '../../../icons/index.js';
+
+type Tone = 'brand' | 'success' | 'warning' | 'danger';
+
+const toneIconMap: Record<Tone, IconName> = {
+    brand: 'info',
+    success: 'circle-check',
+    warning: 'alert-triangle',
+    danger: 'circle-alert',
+};
+
+const props = withDefaults(
+    defineProps<{
+        tone?: Tone;
+        title: string;
+        message?: string;
+        dismissible?: boolean;
+        icon?: IconName;
+        action?: { label: string };
+    }>(),
+    {
+        tone: undefined,
+        message: undefined,
+        dismissible: true,
+        icon: undefined,
+        action: undefined,
+    },
+);
+
+defineEmits<{
+    dismiss: [];
+    action: [];
+}>();
+
+const resolvedIcon = computed<IconName>(
+    () => props.icon ?? (props.tone ? toneIconMap[props.tone] : 'info'),
+);
+</script>
+
+<style>
+@import './toast.css';
+</style>

package/components/feedback/toast/toast.css

@@ -0,0 +1,128 @@
+@layer components {
+    /* The global region container — appended once on first toast.show().
+     Position fixed bottom-right; flex column with gap so stacked toasts
+     space cleanly. v1 only ships bottom-right; the data-position attr
+     is reserved for future positions. */
+    .pui-toast-region {
+        position: fixed;
+        inset: auto var(--space-s) var(--space-s) auto;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2xs);
+        z-index: 1000;
+        pointer-events: none;
+        max-width: calc(100vw - var(--space-s) * 2);
+    }
+
+    /* Reactivate pointer events on the toasts themselves so the
+     region's `pointer-events: none` lets clicks pass through the
+     gaps between toasts. */
+    .pui-toast-region > .pui-toast {
+        pointer-events: auto;
+    }
+
+    .pui-toast {
+        display: grid;
+        grid-template-columns: auto 1fr auto auto;
+        align-items: start;
+        gap: var(--space-xs);
+        padding: var(--space-xs) var(--space-s);
+        background: var(--bg-clr-surface);
+        border: var(--stroke-md) solid var(--border-clr-strong);
+        border-radius: var(--radius-sm);
+        box-shadow: var(--shadow-spark);
+        max-width: 28rem;
+    }
+
+    .pui-toast__icon {
+        width: 1.6rem;
+        height: 1.6rem;
+        border-radius: 50%;
+        background: var(--bg-clr-dark);
+        color: var(--text-clr-inverse);
+        display: grid;
+        place-items: center;
+    }
+
+    .pui-toast__body {
+        display: grid;
+        gap: 2px;
+    }
+
+    .pui-toast__title {
+        font-weight: var(--fw-bold);
+        margin: 0;
+    }
+
+    .pui-toast__msg {
+        margin: 0;
+        color: var(--text-clr-muted);
+        font-size: var(--step--1);
+    }
+
+    /* Action button — same baseline as the close button (no chrome) but
+     the label is visible. Clicking invokes the action callback and
+     dismisses the toast. */
+    .pui-toast__action {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        color: var(--text-clr-link);
+        cursor: pointer;
+        padding: 0;
+        line-height: 1;
+        font: inherit;
+        font-weight: var(--fw-bold);
+        align-self: center;
+    }
+
+    .pui-toast__action:hover {
+        color: var(--text-clr-link-hover);
+        text-decoration: underline;
+    }
+
+    .pui-toast__action:focus-visible {
+        outline: var(--stroke-md) solid var(--outline-clr-base);
+        outline-offset: 2px;
+        border-radius: var(--radius-xs);
+    }
+
+    .pui-toast__close {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        color: var(--text-clr-muted);
+        cursor: pointer;
+        padding: 0;
+        line-height: 1;
+        display: grid;
+        place-items: center;
+    }
+
+    .pui-toast__close:hover {
+        color: var(--text-clr-base);
+    }
+
+    .pui-toast__close:focus-visible {
+        outline: var(--stroke-md) solid var(--outline-clr-base);
+        outline-offset: 2px;
+        border-radius: var(--radius-xs);
+        color: var(--text-clr-base);
+    }
+
+    .pui-toast[data-tone='success'] .pui-toast__icon {
+        background: var(--bg-clr-success);
+    }
+
+    .pui-toast[data-tone='warning'] .pui-toast__icon {
+        background: var(--bg-clr-warning);
+    }
+
+    .pui-toast[data-tone='danger'] .pui-toast__icon {
+        background: var(--bg-clr-danger);
+    }
+
+    .pui-toast[data-tone='brand'] .pui-toast__icon {
+        background: var(--bg-clr-brand);
+    }
+}

package/components/form/checkbox/Checkbox.astro

@@ -0,0 +1,79 @@
+---
+import './checkbox.css';
+import { generateId } from '../../../utils/a11y/id.js';
+
+interface Props {
+  id?: string;
+  label: string;
+  name?: string;
+  checked?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  hint?: string;
+  errors?: string[];
+  status?: 'error' | 'success';
+}
+
+const {
+  id,
+  label,
+  name,
+  checked = false,
+  required = false,
+  disabled = false,
+  hint,
+  errors = [],
+  status,
+  ...rest
+} = Astro.props;
+
+const inputId = id ?? generateId('checkbox');
+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 ariaChecked = checked ? 'true' : 'false';
+---
+
+<div class="pui-field" data-layout="inline" data-status={computedStatus}>
+  <input
+    class="pui-checkbox"
+    type="checkbox"
+    id={inputId}
+    name={name}
+    checked={checked}
+    required={required}
+    disabled={disabled}
+    aria-checked={ariaChecked}
+    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/checkbox/Checkbox.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="pui-field" data-layout="inline" :data-status="computedStatus">
+        <input
+            v-bind="$attrs"
+            :id="inputId"
+            class="pui-checkbox"
+            type="checkbox"
+            :name="name"
+            :checked="modelValue"
+            :required="required"
+            :disabled="disabled"
+            :aria-checked="ariaCheckedValue"
+            :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;
+        required?: boolean;
+        disabled?: boolean;
+        hint?: string;
+        errors?: string[];
+        status?: 'error' | 'success';
+    }>(),
+    {
+        id: undefined,
+        modelValue: false,
+        name: undefined,
+        required: false,
+        disabled: false,
+        hint: undefined,
+        errors: () => [],
+        status: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean];
+}>();
+
+const inputId = props.id ?? generateId('checkbox');
+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 ariaCheckedValue = computed<'true' | 'false'>(() =>
+    props.modelValue ? 'true' : 'false',
+);
+</script>
+
+<style>
+@import './checkbox.css';
+</style>

package/components/form/checkbox/checkbox.css

@@ -0,0 +1,59 @@
+@layer components {
+    .pui-checkbox {
+        appearance: none;
+        flex: none;
+        margin: 0;
+        width: 1.15em;
+        height: 1.15em;
+        border: var(--stroke-md) solid var(--border-clr-strong);
+        border-radius: var(--radius-xs);
+        background: var(--bg-clr-surface);
+        display: grid;
+        place-items: center;
+        cursor: pointer;
+        transition:
+            background 0.12s ease,
+            border-color 0.12s ease;
+    }
+
+    .pui-checkbox:checked {
+        background: var(--bg-clr-brand);
+        border-color: var(--border-clr-brand);
+    }
+
+    /* Checkmark for the binary-checked state. */
+    .pui-checkbox:checked::after {
+        content: '';
+        width: 0.3em;
+        height: 0.55em;
+        border: solid var(--bg-clr-brand-ink);
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+    }
+
+    .pui-checkbox:focus-visible {
+        outline: 3px solid var(--outline-clr-base);
+        outline-offset: 2px;
+    }
+
+    .pui-checkbox:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    /* Status-driven recolour from the parent pui-field wrapper. */
+    .pui-field[data-status='error'] .pui-checkbox {
+        border-color: var(--border-clr-danger);
+    }
+
+    .pui-field[data-status='success'] .pui-checkbox:checked {
+        background: var(--bg-clr-success, var(--bg-clr-brand));
+        border-color: var(--bg-clr-success, var(--border-clr-brand));
+    }
+
+    /* Mute the label + cursor when the input is disabled. */
+    .pui-field:has(.pui-checkbox:disabled) .pui-field__label {
+        color: var(--text-clr-muted);
+        cursor: not-allowed;
+    }
+}