coursecode 0.1.0

package/framework/css/components/slide-header.css

@@ -0,0 +1,52 @@
+/* ========================================
+   UI COMPONENT: Slide Header
+   Use for: Consistent slide titles with optional subtitle
+   Variants: left, divider
+   ======================================== */
+.slide-header {
+  text-align: center;
+}
+
+.slide-header h1,
+.slide-header h2,
+.slide-header h3 {
+  color: var(--color-primary);
+}
+
+.slide-header p {
+  font-size: var(--font-size-lg);
+  color: var(--text-secondary);
+  margin: 0;
+  max-width: 600px;
+  margin-inline: auto;
+}
+
+/* Eyebrow - small label above title */
+.slide-header .eyebrow {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-primary);
+}
+
+/* Left-aligned variant */
+.slide-header-left {
+  text-align: left;
+}
+
+.slide-header-left p {
+  margin-inline: 0;
+}
+
+/* Divider variant - adds bottom border */
+.slide-header-divider {
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Mobile: keep slide-header h1 larger than subtitle p */
+html.bp-max-mobile-landscape .slide-header h1 {
+  font-size: var(--font-size-2xl-base);
+}

package/framework/css/components/spinner.css

@@ -0,0 +1,62 @@
+/* ============================================================================
+   SPINNER - Loading animation indicator
+   ============================================================================
+   
+   PURPOSE: Animated spinner for loading states
+   
+   INCLUDES:
+   - Base spinner (.spinner)
+   - Size variants (.spinner-sm, .spinner-lg)
+   - Rotation animation
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for --color-primary)
+   
+   USED BY:
+   - Loading states during async operations
+   - Placeholder animations
+   - Wait indicators
+   
+   AI DEBUGGING TIPS:
+   - Animation not spinning? Check @keyframes spinner-border
+   - Wrong size? Use .spinner-sm or .spinner-lg variants
+   - Color wrong? Verify color: var(--color-primary) in design-tokens
+   
+   ============================================================================ */
+
+.spinner {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: -0.125em;
+  border: 0.25em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  -webkit-animation: 0.75s linear infinite spinner-border;
+  animation: 0.75s linear infinite spinner-border;
+  color: var(--color-primary);
+}
+
+.spinner-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.2em;
+}
+
+.spinner-lg {
+  width: 3rem;
+  height: 3rem;
+  border-width: 0.3em;
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes spinner-border {
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}

package/framework/css/components/stats.css

@@ -0,0 +1,44 @@
+/* ========================================
+   UI COMPONENT: Stats/Metrics
+   Use for: Displaying important numbers
+   ======================================== */
+[data-component="stats"] {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: var(--space-6);
+  width: 100%;
+}
+
+[data-component="stats"] .stat {
+  text-align: center;
+  padding: var(--space-6);
+  flex: 1 1 150px;
+  max-width: 280px;
+}
+
+[data-component="stats"] .stat-value {
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
+  display: block;
+  line-height: 1;
+  margin-bottom: var(--space-2);
+}
+
+[data-component="stats"] .stat-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-gray-600);
+}
+
+@media (max-width: 640px) {
+  [data-component="stats"] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  [data-component="stats"] .stat {
+    max-width: 100%;
+  }
+}

package/framework/css/components/steps.css

@@ -0,0 +1,232 @@
+/* ========================================
+   UI COMPONENT: Numbered Steps
+   Use for: Step-by-step processes
+   Variants: cards (default), connected, compact, connected-minimal
+   ======================================== */
+[data-component="steps"] {
+  max-width: 800px;
+  margin: 0 auto;
+  position: relative;
+}
+
+[data-component="steps"] .step {
+  display: flex;
+  gap: var(--space-5);
+  margin-bottom: var(--space-4);
+  padding: var(--space-5);
+  background: var(--bg-surface);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-gray-200);
+  box-shadow: var(--shadow-sm);
+  position: relative;
+  transition: var(--transition-normal);
+}
+
+[data-component="steps"] .step:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-md);
+}
+
+[data-component="steps"] .step:last-child {
+  margin-bottom: 0;
+}
+
+[data-component="steps"] .step-number {
+  flex-shrink: 0;
+  width: 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+  color: var(--color-white);
+  border-radius: 50%;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
+  box-shadow: 0 4px 12px var(--color-primary-alpha-30);
+}
+
+[data-component="steps"] .step-content {
+  flex: 1;
+  padding-top: var(--space-2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+[data-component="steps"] .step-content h3 {
+  margin-top: 0;
+  margin-bottom: var(--space-2);
+  color: var(--color-primary);
+}
+
+[data-component="steps"] .step-content p {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+/* Connected variant - Timeline-style with connecting line */
+[data-component="steps"][data-style="connected"] {
+  padding-left: var(--space-8);
+}
+
+[data-component="steps"][data-style="connected"] .step {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: var(--space-4) var(--space-4) var(--space-4) 0;
+  margin-bottom: var(--space-6);
+  position: relative;
+}
+
+/* Connecting line on each step (except last) */
+[data-component="steps"][data-style="connected"] .step::before {
+  content: '';
+  position: absolute;
+  left: 27.5px;
+  /* Center of 52px step number (26px) + half line width (1.5px) */
+  top: 56px;
+  /* Below the step number (2px margin + 52px height + 2px gap) */
+  bottom: calc(-1 * var(--space-6) - 30px);
+  /* Extend through margin gap to next step number center */
+  width: 3px;
+  background: var(--color-primary-alpha-30);
+  border-radius: var(--radius-full);
+}
+
+[data-component="steps"][data-style="connected"] .step:last-child::before {
+  display: none;
+}
+
+[data-component="steps"][data-style="connected"] .step:hover {
+  border: none;
+  box-shadow: none;
+}
+
+[data-component="steps"][data-style="connected"] .step-number {
+  position: relative;
+  z-index: 1;
+  border: 4px solid var(--bg-surface);
+  align-self: flex-start;
+  margin-top: 2px;
+  /* Align center of number with h3 text in card */
+}
+
+[data-component="steps"][data-style="connected"] .step-content {
+  background: var(--bg-surface);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-gray-200);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-normal);
+}
+
+[data-component="steps"][data-style="connected"] .step:hover .step-content {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-md);
+}
+
+/* Compact variant */
+[data-component="steps"][data-style="compact"] .step {
+  padding: var(--space-3) var(--space-4);
+  gap: var(--space-3);
+}
+
+[data-component="steps"][data-style="compact"] .step-number {
+  width: 36px;
+  height: 36px;
+  font-size: var(--font-size-base);
+}
+
+[data-component="steps"][data-style="compact"] .step-content {
+  padding-top: var(--space-1);
+}
+
+/* Connected-minimal variant - connected style without borders, for use inside cards */
+[data-component="steps"][data-style="connected-minimal"] {
+  padding-left: var(--space-8);
+}
+
+[data-component="steps"][data-style="connected-minimal"] .step {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: var(--space-4) var(--space-4) var(--space-4) 0;
+  margin-bottom: var(--space-6);
+  position: relative;
+}
+
+[data-component="steps"][data-style="connected-minimal"] .step::before {
+  content: '';
+  position: absolute;
+  left: 27.5px;
+  top: 56px;
+  bottom: calc(-1 * var(--space-6) - 30px);
+  width: 3px;
+  background: var(--color-primary-alpha-30);
+  border-radius: var(--radius-full);
+}
+
+[data-component="steps"][data-style="connected-minimal"] .step:last-child::before {
+  display: none;
+}
+
+[data-component="steps"][data-style="connected-minimal"] .step:last-child {
+  margin-bottom: 0;
+}
+
+[data-component="steps"][data-style="connected-minimal"] .step:hover {
+  border: none;
+  box-shadow: none;
+}
+
+[data-component="steps"][data-style="connected-minimal"] .step-number {
+  position: relative;
+  z-index: 1;
+  border: 4px solid var(--bg-surface);
+  align-self: flex-start;
+  margin-top: 2px;
+}
+
+[data-component="steps"][data-style="connected-minimal"] .step-content {
+  background: transparent;
+  padding: 0;
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 0;
+}
+
+[data-component="steps"][data-style="connected-minimal"] .step:hover .step-content {
+  border: none !important;
+  box-shadow: none !important;
+}
+
+@media (max-width: 640px) {
+  [data-component="steps"][data-style="connected-minimal"] {
+    padding-left: var(--space-4);
+  }
+
+  [data-component="steps"][data-style="connected-minimal"] .step::before {
+    left: calc(var(--space-4) + 20px);
+  }
+
+  [data-component="steps"][data-style="connected-minimal"] .step-number {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+@media (max-width: 640px) {
+  [data-component="steps"][data-style="connected"] {
+    padding-left: var(--space-4);
+  }
+
+  [data-component="steps"][data-style="connected"]::before {
+    left: calc(var(--space-4) + 20px);
+  }
+
+  [data-component="steps"][data-style="connected"] .step-number {
+    width: 44px;
+    height: 44px;
+  }
+}

package/framework/css/components/tables.css

@@ -0,0 +1,90 @@
+/* ============================================================================
+   TABLES - Simple table styling for data presentation
+   ============================================================================
+   
+   PURPOSE: Clean, accessible table styling for displaying tabular data
+   
+   INCLUDES:
+   - Header styling with background
+   - Body row styling with borders
+   - Hover states for interactivity
+   - Responsive padding and alignment
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   
+   USED BY: Data displays, results tables, comparison tables
+   
+   USAGE:
+   <table class="table">
+     <thead>
+       <tr>
+         <th>Header 1</th>
+         <th>Header 2</th>
+       </tr>
+     </thead>
+     <tbody>
+       <tr>
+         <td>Data 1</td>
+         <td>Data 2</td>
+       </tr>
+     </tbody>
+   </table>
+   
+   ============================================================================ */
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--space-4) 0;
+  font-size: var(--font-size-base);
+}
+
+.table thead {
+  background-color: var(--bg-muted);
+  border-bottom: var(--border-width-md) solid var(--color-gray-300);
+}
+
+.table thead th {
+  padding: var(--space-3);
+  text-align: left;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-gray-900);
+  border-right: var(--border-width-thin) solid var(--color-gray-200);
+}
+
+.table thead th:last-child {
+  border-right: none;
+}
+
+.table tbody td {
+  padding: var(--space-3);
+  border-bottom: var(--border-width-thin) solid var(--color-gray-200);
+  border-right: var(--border-width-thin) solid var(--color-gray-200);
+  color: var(--color-gray-800);
+}
+
+.table tbody td:last-child {
+  border-right: none;
+}
+
+.table tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Striped rows — alternating background on even rows */
+.table-striped thead {
+  background-color: var(--color-gray-200);
+}
+
+.table-striped tbody tr:nth-child(even) {
+  background-color: var(--bg-muted);
+}
+
+.table-striped tbody tr:nth-child(even):hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}