@pienter/ui 0.2.0

package/components/action/toggle/toggle.css

@@ -0,0 +1,77 @@
+@layer components {
+    /* ===== pui-toggle (press-button — Phase 4) =====
+   *
+   * A single press-button that toggles between pressed and unpressed
+   * states via `aria-pressed`. Distinct from `pui-switch` (the form-
+   * primitive on/off control); Toggle is a button-shaped action whose
+   * pressed state surfaces as a visual fill.
+   */
+
+    .pui-toggle {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--space-3xs);
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        background: var(--bg-clr-surface);
+        color: var(--text-clr-base);
+        font: inherit;
+        font-weight: var(--fw-semibold);
+        border-radius: var(--radius-sm);
+        padding: var(--space-2xs) var(--space-s);
+        cursor: pointer;
+        transition:
+            background 0.12s ease,
+            color 0.12s ease,
+            border-color 0.12s ease;
+    }
+
+    .pui-toggle:hover:not(:disabled) {
+        background: var(--bg-clr-surface-2);
+    }
+
+    .pui-toggle:focus-visible {
+        outline: 3px solid var(--outline-clr-base);
+        outline-offset: 2px;
+    }
+
+    .pui-toggle:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    /* ===== pressed state (default tone) ===== */
+
+    .pui-toggle[aria-pressed='true'] {
+        background: var(--bg-clr-surface-2);
+        color: var(--text-clr-base);
+        border-color: var(--border-clr-strong);
+        box-shadow: inset 0 1px 2px rgba(15, 21, 48, 0.08);
+    }
+
+    /* ===== brand tone ===== */
+
+    .pui-toggle[data-tone='brand'][aria-pressed='true'] {
+        background: var(--bg-clr-brand);
+        color: var(--bg-clr-brand-ink);
+        border-color: var(--border-clr-strong);
+    }
+
+    /* ===== sizes ===== */
+
+    .pui-toggle[data-size='sm'] {
+        padding: var(--space-3xs) var(--space-xs);
+        font-size: var(--step--1);
+    }
+
+    .pui-toggle[data-size='md'] {
+        padding: var(--space-2xs) var(--space-s);
+        font-size: var(--step--1);
+    }
+
+    .pui-toggle[data-size='lg'] {
+        padding: var(--space-xs) var(--space-m);
+        font-size: var(--step-1);
+    }
+}

package/components/action/toggle-group/ToggleGroup.vue

@@ -0,0 +1,67 @@
+<template>
+    <div
+        class="pui-toggle-group"
+        role="group"
+        :aria-label="label"
+        :data-size="size"
+    >
+        <button
+            v-for="opt in options"
+            :key="opt.value"
+            class="pui-toggle-group__item"
+            type="button"
+            :disabled="disabled || opt.disabled"
+            :aria-pressed="isPressed(opt.value) ? 'true' : 'false'"
+            @click="toggle(opt.value)"
+        >
+            <Icon v-if="opt.icon" :name="opt.icon as IconName" size="sm" />
+            <span>{{ opt.label }}</span>
+        </button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Icon from '../../display/icon/Icon.vue';
+import type { IconName } from '../../../icons/index.js';
+
+const props = withDefaults(
+    defineProps<{
+        options: {
+            value: string;
+            label: string;
+            disabled?: boolean;
+            icon?: string;
+        }[];
+        modelValue?: string[];
+        label?: string;
+        size?: 'sm' | 'md' | 'lg';
+        disabled?: boolean;
+    }>(),
+    {
+        modelValue: () => [],
+        label: undefined,
+        size: 'md',
+        disabled: false,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string[]];
+}>();
+
+function isPressed(value: string): boolean {
+    return props.modelValue.includes(value);
+}
+
+function toggle(value: string): void {
+    const current = props.modelValue;
+    const next = current.includes(value)
+        ? current.filter((v) => v !== value)
+        : [...current, value];
+    emit('update:modelValue', next);
+}
+</script>
+
+<style>
+@import './toggle-group.css';
+</style>

package/components/action/toggle-group/toggle-group.css

@@ -0,0 +1,78 @@
+@layer components {
+    /* ===== pui-toggle-group (multi-select press-button group — Phase 4) =====
+   *
+   * A horizontally-arranged group of press-buttons where each item
+   * carries its own `aria-pressed` state. Multi-select: any subset of
+   * items can be pressed at once. Distinct from Segmented (single-
+   * select) — see select.css `.pui-segmented` for that single-select
+   * sibling.
+   */
+
+    .pui-toggle-group {
+        display: inline-flex;
+        align-items: stretch;
+        gap: var(--space-3xs);
+        background: var(--bg-clr-surface-2);
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        border-radius: var(--radius-sm);
+        padding: 3px;
+    }
+
+    .pui-toggle-group__item {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        color: var(--text-clr-muted);
+        font: inherit;
+        font-size: var(--step--1);
+        font-weight: var(--fw-semibold);
+        padding: 0.4em 0.85em;
+        border-radius: calc(var(--radius-sm) - 1px);
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-3xs);
+        transition:
+            background 0.12s ease,
+            color 0.12s ease;
+    }
+
+    .pui-toggle-group__item:hover:not(:disabled) {
+        color: var(--text-clr-base);
+    }
+
+    .pui-toggle-group__item:focus-visible {
+        outline: 3px solid var(--outline-clr-base);
+        outline-offset: 2px;
+    }
+
+    .pui-toggle-group__item:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    /* ===== pressed state ===== */
+
+    .pui-toggle-group__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);
+    }
+
+    /* ===== sizes (drive padding + font-size of items) ===== */
+
+    .pui-toggle-group[data-size='sm'] .pui-toggle-group__item {
+        padding: 0.3em 0.6em;
+        font-size: var(--step--2);
+    }
+
+    .pui-toggle-group[data-size='md'] .pui-toggle-group__item {
+        padding: 0.4em 0.85em;
+        font-size: var(--step--1);
+    }
+
+    .pui-toggle-group[data-size='lg'] .pui-toggle-group__item {
+        padding: 0.5em 1.1em;
+        font-size: var(--step-1);
+    }
+}

package/components/display/avatar/Avatar.astro

@@ -0,0 +1,17 @@
+---
+import './avatar.css';
+
+interface Props {
+  size?: 'sm' | 'lg';
+  tone?: 'brand' | 'solid';
+  src?: string;
+  alt?: string;
+  initials?: string;
+}
+
+const { size, tone, src, alt = '', initials, ...rest } = Astro.props;
+---
+
+<span class="pui-avatar" data-size={size} data-tone={tone} {...rest}>
+  {src ? <img src={src} alt={alt} /> : initials ? initials : <slot />}
+</span>

package/components/display/avatar/Avatar.vue

@@ -0,0 +1,30 @@
+<template>
+    <span class="pui-avatar" :data-size="size" :data-tone="tone">
+        <img v-if="src" :src="src" :alt="alt ?? ''" />
+        <template v-else-if="initials">{{ initials }}</template>
+        <slot v-else />
+    </span>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        size?: 'sm' | 'lg';
+        tone?: 'brand' | 'solid';
+        src?: string;
+        alt?: string;
+        initials?: string;
+    }>(),
+    {
+        size: undefined,
+        tone: undefined,
+        src: undefined,
+        alt: undefined,
+        initials: undefined,
+    },
+);
+</script>
+
+<style>
+@import './avatar.css';
+</style>

package/components/display/avatar/AvatarStack.astro

@@ -0,0 +1,9 @@
+---
+import './avatar.css';
+
+const { ...rest } = Astro.props;
+---
+
+<div class="pui-avatar-stack" {...rest}>
+  <slot />
+</div>

package/components/display/avatar/AvatarStack.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="pui-avatar-stack">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style>
+@import './avatar.css';
+</style>

package/components/display/avatar/avatar.css

@@ -0,0 +1,58 @@
+@layer components {
+    .pui-avatar {
+        display: inline-grid;
+        place-items: center;
+        width: 2.4rem;
+        height: 2.4rem;
+        border-radius: 50%;
+        background: var(--bg-clr-accent);
+        color: var(--text-clr-base);
+        font-weight: var(--fw-bold);
+        font-size: var(--step--1);
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        overflow: hidden;
+        line-height: 1;
+    }
+
+    .pui-avatar img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+    }
+
+    .pui-avatar[data-size='sm'] {
+        width: 1.75rem;
+        height: 1.75rem;
+        font-size: var(--step--2);
+    }
+
+    .pui-avatar[data-size='lg'] {
+        width: 3.25rem;
+        height: 3.25rem;
+        font-size: var(--step-1);
+    }
+
+    .pui-avatar[data-tone='brand'] {
+        background: var(--bg-clr-brand);
+        color: var(--bg-clr-brand-ink);
+    }
+
+    .pui-avatar[data-tone='solid'] {
+        background: var(--bg-clr-dark);
+        color: var(--text-clr-inverse);
+    }
+
+    .pui-avatar-stack {
+        display: inline-flex;
+    }
+
+    .pui-avatar-stack .pui-avatar {
+        margin-inline-start: -0.5rem;
+        box-shadow: 0 0 0 2px var(--bg-clr-surface);
+    }
+
+    .pui-avatar-stack .pui-avatar:first-child {
+        margin-inline-start: 0;
+    }
+}

package/components/display/badge/Badge.astro

@@ -0,0 +1,15 @@
+---
+import './badge.css';
+
+interface Props {
+  tone?: 'brand' | 'success' | 'warning' | 'danger' | 'solid';
+  dot?: boolean;
+}
+
+const { tone, dot = false, ...rest } = Astro.props;
+---
+
+<span class="pui-badge" data-tone={tone} {...rest}>
+  {dot && <span class="pui-badge__dot" />}
+  <slot />
+</span>

package/components/display/badge/Badge.vue

@@ -0,0 +1,23 @@
+<template>
+    <span class="pui-badge" :data-tone="tone">
+        <span v-if="dot" class="pui-badge__dot" />
+        <slot />
+    </span>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        tone?: 'brand' | 'success' | 'warning' | 'danger' | 'solid';
+        dot?: boolean;
+    }>(),
+    {
+        tone: undefined,
+        dot: false,
+    },
+);
+</script>
+
+<style>
+@import './badge.css';
+</style>

package/components/display/badge/badge.css

@@ -0,0 +1,56 @@
+@layer components {
+    .pui-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--control-gap);
+        min-height: var(--control-height-sm);
+        padding-inline: var(--control-inline-pad-sm);
+        font-size: var(--step--2);
+        line-height: var(--lh-control);
+        font-weight: var(--fw-control);
+        border-radius: var(--radius-pill);
+        background: var(--bg-clr-surface-2);
+        color: var(--text-clr-base);
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        white-space: nowrap;
+
+        & .pui-badge__dot {
+            width: 0.5em;
+            height: 0.5em;
+            border-radius: 50%;
+            background: currentColor;
+        }
+
+        /* ===== tones ===== */
+
+        &[data-tone='brand'] {
+            background: var(--bg-clr-brand-soft);
+            color: var(--text-clr-brand);
+            border-color: transparent;
+        }
+
+        &[data-tone='success'] {
+            background: var(--bg-clr-success-soft);
+            color: var(--text-clr-success);
+            border-color: transparent;
+        }
+
+        &[data-tone='warning'] {
+            background: var(--bg-clr-warning-soft);
+            color: var(--text-clr-warning);
+            border-color: transparent;
+        }
+
+        &[data-tone='danger'] {
+            background: var(--bg-clr-danger-soft);
+            color: var(--text-clr-danger);
+            border-color: transparent;
+        }
+
+        &[data-tone='solid'] {
+            background: var(--bg-clr-dark);
+            color: var(--text-clr-inverse);
+            border-color: transparent;
+        }
+    }
+}

package/components/display/empty/Empty.astro

@@ -0,0 +1,9 @@
+---
+import './empty.css';
+
+const { ...rest } = Astro.props;
+---
+
+<div class="pui-empty" {...rest}>
+  <slot />
+</div>

package/components/display/empty/Empty.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="pui-empty">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style>
+@import './empty.css';
+</style>

package/components/display/empty/empty.css

@@ -0,0 +1,39 @@
+@layer components {
+    .pui-empty {
+        display: grid;
+        place-items: center;
+        text-align: center;
+        padding: var(--space-xl) var(--space-m);
+        border: 1.5px dashed var(--border-clr-strong);
+        border-radius: var(--radius-md);
+        background: var(--bg-clr-surface);
+        gap: var(--space-xs);
+    }
+    .pui-empty__icon {
+        width: 3rem;
+        height: 3rem;
+        border-radius: var(--radius-sm);
+        border: var(--stroke-md) solid var(--border-clr-strong);
+        background: var(--bg-clr-accent);
+        display: grid;
+        place-items: center;
+        font-size: var(--step-1);
+    }
+    .pui-empty__title {
+        font-family: var(--ff-display);
+        font-weight: var(--fw-display);
+        letter-spacing: var(--ls-display);
+        font-size: var(--step-1);
+        margin: 0;
+    }
+    .pui-empty__body {
+        margin: 0;
+        color: var(--text-clr-muted);
+        max-width: 38ch;
+    }
+    .pui-empty__actions {
+        display: flex;
+        gap: var(--space-2xs);
+        margin-block-start: var(--space-2xs);
+    }
+}

package/components/display/icon/Icon.astro

@@ -0,0 +1,52 @@
+---
+import './icon.css';
+import { icons, type IconName } from '../../../icons/index.js';
+
+interface Props {
+  /** Shipped icon to render. Omit and pass a custom <svg> via the default slot. */
+  name?: IconName;
+  size?: 'sm' | 'md' | 'lg';
+  /** Continuous animation applied to the glyph (e.g. a loading spinner). */
+  animation?: 'spin';
+  label?: string;
+}
+
+const { name, size = 'md', animation, label, ...rest } = Astro.props;
+const hasSlot = Astro.slots.has('default');
+
+// slot wins over name; flag the redundant combination in development
+if (import.meta.env.DEV && name && hasSlot) {
+  console.warn(
+    '[pienter-ui] Icon received both a `name` and slot content; the slot is used and `name` is ignored.',
+  );
+}
+
+const svg = name ? icons[name] : '';
+---
+
+{
+  hasSlot ? (
+    <span
+      class="pui-icon"
+      data-size={size}
+      data-animation={animation}
+      aria-hidden={!label}
+      aria-label={label}
+      role={label ? 'img' : undefined}
+      {...rest}
+    >
+      <slot />
+    </span>
+  ) : (
+    <span
+      class="pui-icon"
+      data-size={size}
+      data-animation={animation}
+      aria-hidden={!label}
+      aria-label={label}
+      role={label ? 'img' : undefined}
+      {...rest}
+      set:html={svg}
+    />
+  )
+}

package/components/display/icon/Icon.vue

@@ -0,0 +1,57 @@
+<template>
+    <span v-if="hasSlot" v-bind="iconAttrs"><slot /></span>
+    <!--
+      `svg` is a build-time constant read from the first-party icon registry
+      (icons/index.ts) keyed by the typed `IconName` prop; it is never user- or
+      network-supplied, so there is no XSS surface. v-html is required to inline
+      the raw SVG markup.
+    -->
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span v-else v-bind="iconAttrs" v-html="svg" />
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { icons, type IconName } from '../../../icons/index.js';
+
+const props = withDefaults(
+    defineProps<{
+        /** Shipped icon to render. Omit and pass a custom <svg> via the default slot. */
+        name?: IconName;
+        size?: 'sm' | 'md' | 'lg';
+        /** Continuous animation applied to the glyph (e.g. a loading spinner). */
+        animation?: 'spin';
+        label?: string;
+    }>(),
+    {
+        name: undefined,
+        size: 'md',
+        animation: undefined,
+        label: undefined,
+    },
+);
+
+const slots = useSlots();
+const hasSlot = computed(() => !!slots.default);
+
+// slot wins over name; flag the redundant combination in development
+if (props.name && slots.default) {
+    console.warn(
+        '[pienter-ui] Icon received both a `name` and slot content; the slot is used and `name` is ignored.',
+    );
+}
+
+const svg = computed(() => (props.name ? icons[props.name] : ''));
+const iconAttrs = computed(() => ({
+    class: 'pui-icon',
+    'data-size': props.size,
+    'data-animation': props.animation,
+    'aria-hidden': !props.label,
+    'aria-label': props.label,
+    role: props.label ? 'img' : undefined,
+}));
+</script>
+
+<style>
+@import './icon.css';
+</style>

package/components/display/icon/icon.css

@@ -0,0 +1,47 @@
+@layer components {
+    .pui-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        line-height: 1;
+
+        & svg {
+            display: block;
+        }
+
+        /* ===== sizes ===== */
+
+        &[data-size='sm'] svg {
+            width: 1rem;
+            height: 1rem;
+        }
+
+        &[data-size='md'] svg {
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+
+        &[data-size='lg'] svg {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+
+        /* ===== animations ===== */
+
+        /* spins the square wrapper, so the pivot is the glyph's own centre */
+        &[data-animation='spin'] {
+            animation: pui-icon-spin var(--duration-slow) linear infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
+        }
+    }
+
+    @keyframes pui-icon-spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+}