@ternent/core 0.0.1

package/packages/ui/src/patterns/SectionIntro/SectionIntro.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type {
+  SectionIntroAlign,
+  SectionIntroSize,
+  SectionIntroTitleTag,
+} from "./SectionIntro.types";
+
+const props = withDefaults(
+  defineProps<{
+    align?: SectionIntroAlign;
+    description?: string;
+    eyebrow?: string;
+    size?: SectionIntroSize;
+    title: string;
+    titleTag?: SectionIntroTitleTag;
+  }>(),
+  {
+    align: "start",
+    description: undefined,
+    eyebrow: undefined,
+    size: "section",
+    titleTag: "h2",
+  },
+);
+
+const rootClass = computed(() => [
+  "ui-section-intro",
+  `ui-section-intro--${props.align}`,
+  `ui-section-intro--${props.size}`,
+]);
+
+const titleClass = computed(() => [
+  "ui-section-intro__title",
+  `ui-section-intro__title--${props.size}`,
+]);
+</script>
+
+<template>
+  <div :class="rootClass">
+    <p v-if="props.eyebrow" class="ui-section-intro__eyebrow">
+      {{ props.eyebrow }}
+    </p>
+    <component :is="props.titleTag" :class="titleClass">
+      {{ props.title }}
+    </component>
+    <p v-if="props.description" class="ui-section-intro__description">
+      {{ props.description }}
+    </p>
+    <div v-if="$slots.actions" class="ui-section-intro__actions">
+      <slot name="actions" />
+    </div>
+    <div v-if="$slots.default" class="ui-section-intro__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ui-section-intro {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  color: var(--ui-fg);
+}
+
+.ui-section-intro--center {
+  align-items: center;
+  text-align: center;
+}
+
+.ui-section-intro__eyebrow {
+  margin: 0;
+  color: var(--ui-fg-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+}
+
+.ui-section-intro__title {
+  margin: 0;
+  color: var(--ui-fg);
+  font-weight: 500;
+  letter-spacing: -0.04em;
+  line-height: 1.05;
+  text-wrap: balance;
+}
+
+.ui-section-intro__title--hero {
+  max-width: 12ch;
+  font-size: clamp(3.25rem, 6.4vw, 5.65rem);
+  letter-spacing: -0.05em;
+  line-height: 0.98;
+}
+
+.ui-section-intro__title--section {
+  font-size: clamp(2.25rem, 4vw, 3.25rem);
+}
+
+.ui-section-intro__title--compact {
+  font-size: clamp(1.5rem, 2.5vw, 2rem);
+}
+
+.ui-section-intro__description {
+  margin: 0;
+  max-width: 42rem;
+  color: var(--ui-fg-muted);
+  font-size: 1.125rem;
+  line-height: 1.7;
+  text-wrap: pretty;
+}
+
+.ui-section-intro--hero .ui-section-intro__description {
+  max-width: 34rem;
+  font-size: 1.03rem;
+  line-height: 1.75;
+  color: color-mix(in srgb, var(--ui-fg-muted) 92%, var(--ui-bg) 8%);
+}
+
+.ui-section-intro--compact .ui-section-intro__description {
+  font-size: 1rem;
+}
+
+.ui-section-intro__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.ui-section-intro--center .ui-section-intro__actions {
+  justify-content: center;
+}
+
+.ui-section-intro__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>

package/packages/ui/src/patterns/SidebarNav/SidebarNav.spec.md

@@ -0,0 +1,34 @@
+# SidebarNav
+
+## Purpose
+
+Reusable sidebar navigation composition for grouped links and action footer content.
+
+## Category
+
+Pattern
+
+## Public API
+
+Props:
+
+- `sections`: `SidebarNavSection[]`
+- `title`: optional string
+
+Slots:
+
+- `header`
+- `footer`
+
+Events:
+
+- `select(item, event)` when an item is activated
+
+## Behavior
+
+- renders grouped nav sections with optional section labels
+- supports Router links (`to`), external links (`href`), and button-like actions
+- applies active-state styling through `item.active`
+- supports optional item count pills via `item.count`
+- supports optional active indicator dot via `item.showActiveDot`
+- keeps footer actions visually separated from route links

package/packages/ui/src/patterns/SidebarNav/SidebarNav.types.ts

@@ -0,0 +1,17 @@
+export type SidebarNavItem = {
+  active?: boolean;
+  count?: number | string;
+  dataTest?: string;
+  disabled?: boolean;
+  href?: string;
+  id?: string;
+  label: string;
+  showActiveDot?: boolean;
+  to?: string;
+};
+
+export type SidebarNavSection = {
+  id?: string;
+  items: SidebarNavItem[];
+  label?: string;
+};

package/packages/ui/src/patterns/SidebarNav/SidebarNav.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import Button from "../../primitives/Button/Button.vue";
+import type { SidebarNavItem, SidebarNavSection } from "./SidebarNav.types";
+
+const emit = defineEmits<{
+  select: [item: SidebarNavItem, event: MouseEvent];
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    sections: SidebarNavSection[];
+    title?: string;
+  }>(),
+  {
+    title: undefined,
+  },
+);
+
+const slots = useSlots();
+
+const normalizedSections = computed(() =>
+  props.sections.filter((section) => section.items.length > 0),
+);
+
+const hasHeader = computed(() => Boolean(props.title || slots.header));
+
+function handleSelect(item: SidebarNavItem, event: MouseEvent): void {
+  if (item.disabled) {
+    event.preventDefault();
+    event.stopPropagation();
+    return;
+  }
+
+  emit("select", item, event);
+}
+</script>
+
+<template>
+  <aside class="flex h-full min-h-0 flex-col border-r border-[var(--ui-border)] bg-[var(--ui-surface)]">
+    <div
+      v-if="hasHeader"
+      class="flex items-center justify-between gap-2 border-b border-[var(--ui-border)] px-3 py-2"
+    >
+      <slot name="header">
+        <p class="m-0 text-sm font-medium tracking-[0.08em] text-[var(--ui-fg)]">
+          {{ props.title }}
+        </p>
+      </slot>
+    </div>
+
+    <nav
+      class="flex min-h-0 flex-1 flex-col gap-7 overflow-auto px-3 py-5"
+      aria-label="Sidebar navigation"
+    >
+      <template
+        v-for="(section, sectionIndex) in normalizedSections"
+        :key="section.id ?? `sidebar-section-${sectionIndex}`"
+      >
+        <div class="flex flex-col gap-1">
+          <p
+            v-if="section.label"
+            class="m-0 px-3 text-[11px] font-bold uppercase tracking-[0.16em] text-[var(--ui-fg-muted)]/80"
+          >
+            {{ section.label }}
+          </p>
+
+          <Button
+            v-for="item in section.items"
+            :key="item.id ?? item.to ?? item.href ?? item.label"
+            :as="item.to ? 'RouterLink' : item.href ? 'a' : 'button'"
+            :to="item.to"
+            :href="item.href"
+            :target="item.href ? '_blank' : undefined"
+            :rel="item.href ? 'noreferrer noopener' : undefined"
+            :disabled="Boolean(item.disabled)"
+            :variant="item.active ? 'secondary' : 'plain-secondary'"
+            size="sm"
+            :class="[
+              'w-full justify-between rounded-xl px-3 py-2.5 !text-sm',
+              item.active
+                ? '!border-transparent !bg-[var(--ui-tonal-secondary)] !font-semibold !shadow-none hover:!bg-[var(--ui-tonal-secondary-hover)]'
+                : '!font-medium',
+            ]"
+            :data-test="item.dataTest"
+            @click="handleSelect(item, $event)"
+          >
+            <span class="inline-flex min-w-0 items-center gap-2">
+              <span
+                v-if="item.active && item.showActiveDot"
+                class="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--ui-primary)]"
+              ></span>
+              <span class="truncate">{{ item.label }}</span>
+            </span>
+            <span
+              v-if="item.count !== undefined"
+              class="ml-2 inline-flex min-w-5 shrink-0 items-center justify-center rounded-full border border-[var(--ui-border)] bg-[var(--ui-surface)] px-2 py-0.5 text-[11px] font-medium text-[var(--ui-fg-muted)]"
+            >
+              {{ item.count }}
+            </span>
+          </Button>
+        </div>
+      </template>
+    </nav>
+
+    <footer v-if="$slots.footer" class="border-t border-[var(--ui-border)] p-3">
+      <slot name="footer" />
+    </footer>
+  </aside>
+</template>

package/packages/ui/src/patterns/SplitView/SplitView.spec.md

@@ -0,0 +1,28 @@
+# SplitView
+
+## Purpose
+
+Reusable two-pane layout composition for in-content navigation rails and detail surfaces.
+
+## Category
+
+Pattern
+
+## Public API
+
+Props:
+
+- `railAriaLabel`: optional `aria-label` for rail landmark
+- `railWidth`: `sm | md | lg` (`md` default)
+- `divider`: toggles rail/content divider (`true` default)
+
+Slots:
+
+- `rail`
+- default slot (detail content)
+
+## Behavior
+
+- stacks on small screens and switches to side-by-side split at `md`
+- constrains rail width via tokenized width presets
+- keeps rail and detail as distinct semantic regions

package/packages/ui/src/patterns/SplitView/SplitView.test.ts

@@ -0,0 +1,22 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+import { getSplitViewRailWidthClass } from "./SplitView.utils";
+
+describe("SplitView", () => {
+  it("maps rail width variants to layout classes", () => {
+    expect(getSplitViewRailWidthClass("sm")).toBe("md:basis-64 md:max-w-64");
+    expect(getSplitViewRailWidthClass("md")).toBe("md:basis-72 md:max-w-72");
+    expect(getSplitViewRailWidthClass("lg")).toBe("md:basis-80 md:max-w-80");
+  });
+
+  it("declares rail and detail slots", () => {
+    const source = readFileSync(
+      resolve(process.cwd(), "src/patterns/SplitView/SplitView.vue"),
+      "utf8",
+    );
+
+    expect(source).toContain('<slot name="rail" />');
+    expect(source).toContain("<slot />");
+  });
+});

package/packages/ui/src/patterns/SplitView/SplitView.types.ts

@@ -0,0 +1,3 @@
+export const splitViewRailWidthValues = ["sm", "md", "lg"] as const;
+
+export type SplitViewRailWidth = (typeof splitViewRailWidthValues)[number];

package/packages/ui/src/patterns/SplitView/SplitView.utils.ts

@@ -0,0 +1,13 @@
+import type { SplitViewRailWidth } from "./SplitView.types";
+
+export function getSplitViewRailWidthClass(width: SplitViewRailWidth): string {
+  if (width === "sm") {
+    return "md:basis-64 md:max-w-64";
+  }
+
+  if (width === "lg") {
+    return "md:basis-80 md:max-w-80";
+  }
+
+  return "md:basis-72 md:max-w-72";
+}

package/packages/ui/src/patterns/SplitView/SplitView.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { SplitViewRailWidth } from "./SplitView.types";
+import { getSplitViewRailWidthClass } from "./SplitView.utils";
+
+const props = withDefaults(
+  defineProps<{
+    divider?: boolean;
+    railAriaLabel?: string;
+    railWidth?: SplitViewRailWidth;
+  }>(),
+  {
+    divider: true,
+    railAriaLabel: "Section navigation",
+    railWidth: "md",
+  },
+);
+
+const railWidthClass = computed(() => getSplitViewRailWidthClass(props.railWidth));
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-col gap-4 md:flex-row!" data-pattern="split-view">
+    <aside
+      :class="[
+        'min-h-0 pb-4 md:pb-0 md:pr-4',
+        props.divider ? 'border-b border-[var(--ui-border)] md:border-b-0 md:border-r' : '',
+        railWidthClass,
+      ]"
+      :aria-label="props.railAriaLabel"
+    >
+      <slot name="rail" />
+    </aside>
+
+    <section class="min-h-0 flex-1" data-slot="detail">
+      <slot />
+    </section>
+  </div>
+</template>

package/packages/ui/src/patterns/StepList/StepList.spec.md

@@ -0,0 +1,15 @@
+# StepList
+
+## Purpose
+
+Ordered process list for onboarding, workflows, and narrative explanations.
+
+## Category
+
+Pattern
+
+## Public API
+
+Props:
+
+- `items`: array of `{ title, description }`

package/packages/ui/src/patterns/StepList/StepList.types.ts

@@ -0,0 +1,4 @@
+export type StepListItem = {
+  description: string;
+  title: string;
+};

package/packages/ui/src/patterns/StepList/StepList.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { StepListItem } from "./StepList.types";
+
+defineProps<{
+  items: readonly StepListItem[];
+}>();
+</script>
+
+<template>
+  <ol class="ui-step-list">
+    <li v-for="(item, index) in items" :key="item.title" class="ui-step-list__item">
+      <div class="ui-step-list__marker" aria-hidden="true">
+        {{ index + 1 }}
+      </div>
+      <div class="ui-step-list__body">
+        <h3 class="ui-step-list__title">{{ item.title }}</h3>
+        <p class="ui-step-list__description">{{ item.description }}</p>
+      </div>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.ui-step-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ui-step-list__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+  align-items: start;
+}
+
+.ui-step-list__marker {
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--ui-primary) 40%, var(--ui-border));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--ui-primary-muted) 72%, transparent);
+  color: var(--ui-fg);
+  font-size: 0.9rem;
+  font-weight: 600;
+  box-shadow: var(--ui-shadow-sm);
+}
+
+.ui-step-list__body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.ui-step-list__item:not(:last-child) .ui-step-list__body::after {
+  position: absolute;
+  top: 2rem;
+  left: -1.5rem;
+  width: 1px;
+  height: calc(100% - 0.25rem);
+  content: "";
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--ui-primary-muted) 80%, transparent),
+    transparent
+  );
+}
+
+.ui-step-list__title {
+  margin: 0;
+  color: var(--ui-fg);
+  font-size: 1.375rem;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+}
+
+.ui-step-list__description {
+  margin: 0;
+  color: var(--ui-fg-muted);
+  font-size: 1rem;
+  line-height: 1.7;
+}
+</style>

package/packages/ui/src/patterns/Verification/VerificationBadge.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import Badge from "../../primitives/Badge/Badge.vue";
+import type { VerificationContext, VerificationStatus } from "./verification.types.js";
+import {
+  getVerificationBadgeTone,
+  getVerificationStatusLabel,
+  getVerificationSurfaceLabel,
+  truncateMiddle,
+} from "./verification.utils.js";
+
+const props = withDefaults(
+  defineProps<{
+    status: VerificationStatus;
+    context?: VerificationContext;
+    size?: "sm" | "md";
+    subject?: string;
+    label?: string;
+  }>(),
+  {
+    context: undefined,
+    size: "sm",
+    subject: undefined,
+    label: undefined,
+  },
+);
+
+const tone = computed(() => getVerificationBadgeTone(props.status));
+const displayLabel = computed(() => props.label ?? getVerificationStatusLabel(props.status));
+const contextLabel = computed(() => getVerificationSurfaceLabel(props.context?.surface));
+const truncatedSubject = computed(() => {
+  if (!props.subject) return undefined;
+  return truncateMiddle(
+    props.subject,
+    props.size === "md" ? 16 : 12,
+    props.size === "md" ? 14 : 10,
+  );
+});
+const iconClass = computed(() => (props.size === "md" ? "size-4" : "size-3.5"));
+</script>
+
+<template>
+  <Badge
+    :tone="tone"
+    variant="outline"
+    :size="props.size === 'md' ? 'md' : 'sm'"
+    class="max-w-full"
+    :data-status="props.status"
+  >
+    <span class="flex min-w-0 items-center gap-1.5">
+      <span :class="iconClass" aria-hidden="true">
+        <svg v-if="props.status === 'verified'" viewBox="0 0 24 24" fill="none" class="size-full">
+          <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.75" />
+          <path
+            d="m8.5 12 2.2 2.2 4.8-5"
+            stroke="currentColor"
+            stroke-width="1.75"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <svg
+          v-else-if="props.status === 'failed'"
+          viewBox="0 0 24 24"
+          fill="none"
+          class="size-full"
+        >
+          <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.75" />
+          <path
+            d="M9.5 9.5 14.5 14.5M14.5 9.5 9.5 14.5"
+            stroke="currentColor"
+            stroke-width="1.75"
+            stroke-linecap="round"
+          />
+        </svg>
+        <svg v-else viewBox="0 0 24 24" fill="none" class="size-full">
+          <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.75" />
+          <circle cx="12" cy="12" r="1.75" fill="currentColor" />
+        </svg>
+      </span>
+
+      <span class="truncate">{{ displayLabel }}</span>
+
+      <span v-if="contextLabel" class="shrink-0 text-[10px] uppercase tracking-[0.2em] opacity-70">
+        {{ contextLabel }}
+      </span>
+
+      <span
+        v-if="truncatedSubject"
+        class="min-w-0 truncate font-mono text-[11px] opacity-80"
+        :title="props.subject"
+      >
+        {{ truncatedSubject }}
+      </span>
+    </span>
+  </Badge>
+</template>