diff --git a/documentation/AE__UI_Component_Patterns.md b/documentation/AE__UI_Component_Patterns.md new file mode 100644 index 00000000..538f4deb --- /dev/null +++ b/documentation/AE__UI_Component_Patterns.md @@ -0,0 +1,384 @@ +# Aether UI — Component Style Patterns +> **Version:** 1.0 (2026-03-06) +> **Author:** One Sky IT / Scott Idem +> **Scope:** All Aether SvelteKit frontend components +> **Related:** `GUIDE__AE_UI_Style_Guidelines.md` (color rules, token definitions, a11y) + +This document is a recipe book. Copy these patterns directly. Deviate only when a component's specific purpose genuinely requires it — and document why in a comment. + +--- + +## 1. Hero Card +*Used for: session identity, presenter identity, location identity — the top-of-page "Is this the right one?" card.* + +```svelte +
+
+ +

{name}

+ + +
+ + + + Mon, Jan 1 – 2:00 PM + + + + + Room 201 + +
+
+
+``` + +**Skeleton loading variant:** +```svelte + +
+
+``` + +--- + +## 2. Standard Content Card +*Used for: description text, notes, secondary info panels.* + +```svelte +
+ + Description +

{description}

+
+``` + +**Variant — inner secondary panel:** +```svelte +
+ +
+``` + +--- + +## 3. Table Row +*Used for: session search results tables, any `` list.* + +```svelte + + + + {obj.name} + + + +``` + +- `opacity-50` for hidden/archived records +- `preset-tonal-warning` for disabled (not enabled) records — amber background +- `transition-colors duration-200` on both `` and `` + +--- + +## 4. List Item Card +*Used for: presentation list items, session details lists, any vertical card stack.* + +```svelte + +``` + +**Rules:** +- Background goes on `
  • `, NOT on `