coursecode 0.1.0

package/framework/css/components/checkbox-group.css

@@ -0,0 +1,123 @@
+/* ============================================================================
+   CHECKBOX GROUP - Custom styled checkbox groups
+   ============================================================================
+   
+   PURPOSE: Grouped checkbox options with custom visual indicators
+   
+   INCLUDES:
+   - Checkbox group container styling
+   - Individual checkbox option styling
+   - Custom checkbox indicator with checkmark
+   - Focus states and disabled states
+   - Checked state styling
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   - Requires: ui-components/checkbox-group.js (JavaScript component)
+   
+   USED BY: Multiple selection questions, preference lists, filter options
+   
+   USAGE:
+   <div class="checkbox-group">
+     <label class="checkbox-option">
+       <input type="checkbox" name="choice" value="a" />
+       <span class="checkbox-custom"></span>
+       <div class="checkbox-label">Option A</div>
+     </label>
+   </div>
+   
+   ============================================================================ */
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.checkbox-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  border: var(--border-width-md) solid var(--color-gray-300);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+  background: var(--bg-surface);
+  position: relative;
+}
+
+.checkbox-option:hover {
+  border-color: var(--color-secondary);
+  background: var(--bg-subtle);
+}
+
+.checkbox-option input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.checkbox-custom {
+  width: 24px;
+  height: 24px;
+  border: var(--border-width-md) solid var(--color-gray-400);
+  border-radius: var(--radius-md);
+  position: relative;
+  flex-shrink: 0;
+  transition: border-color var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast);
+  background: var(--bg-surface);
+}
+
+.checkbox-custom::after {
+  content: '✓';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  color: var(--color-white);
+  font-size: var(--font-size-base);
+  font-weight: bold;
+  transition: transform var(--transition-fast);
+}
+
+.checkbox-option input[type="checkbox"]:checked ~ .checkbox-custom {
+  background: var(--color-secondary);
+  border-color: var(--color-secondary);
+}
+
+.checkbox-option input[type="checkbox"]:checked ~ .checkbox-custom::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.checkbox-option input[type="checkbox"]:focus-visible ~ .checkbox-custom {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.checkbox-option input[type="checkbox"]:disabled ~ .checkbox-custom {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.checkbox-option:has(input[type="checkbox"]:checked) {
+  border-color: var(--color-secondary);
+  background: rgba(131, 8, 255, 0.05);
+}
+
+.checkbox-label {
+  font-size: var(--font-size-base);
+  color: var(--color-gray-900);
+  font-weight: var(--font-weight-medium);
+  flex: 1;
+}
+
+.checkbox-description {
+  font-size: var(--font-size-sm);
+  color: var(--color-gray-600);
+  margin-top: var(--space-1);
+}

package/framework/css/components/checklist.css

@@ -0,0 +1,203 @@
+/* ========================================
+   UI COMPONENT: Checklist
+   Use for: Compliance lists, task completion, requirements
+   Marker is CSS-generated via ::before — no empty span needed in HTML.
+   Variants: cards, minimal, numbered
+   ======================================== */
+[data-component="checklist"] {
+  max-width: 700px;
+  margin-inline: auto;
+  counter-reset: checklist;
+}
+
+[data-component="checklist"] .checklist-group {
+  margin-bottom: var(--space-6);
+}
+
+[data-component="checklist"] .checklist-group:last-child {
+  margin-bottom: 0;
+}
+
+[data-component="checklist"] .checklist-group-title {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--space-3);
+  padding-bottom: var(--space-2);
+  border-bottom: 2px solid var(--color-gray-200);
+}
+
+[data-component="checklist"] .checklist-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  margin-bottom: var(--space-2);
+  background: var(--bg-surface);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-gray-300);
+  transition: var(--transition-normal);
+  counter-increment: checklist;
+}
+
+[data-component="checklist"] .checklist-item:last-child {
+  margin-bottom: 0;
+}
+
+[data-component="checklist"] .checklist-item:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Checkbox-style marker (auto-generated) */
+[data-component="checklist"] .checklist-item::before {
+  content: '';
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--color-gray-400);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition-fast);
+  margin-top: 2px;
+}
+
+/* Completed state */
+[data-component="checklist"] .checklist-item.completed::before {
+  content: '✓';
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: var(--color-white);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+}
+
+[data-component="checklist"] .checklist-item.completed .checklist-text {
+  color: var(--text-secondary);
+}
+
+/* Checklist text content */
+[data-component="checklist"] .checklist-text {
+  flex: 1;
+}
+
+[data-component="checklist"] .checklist-text strong {
+  display: block;
+  color: var(--text-primary);
+  margin-bottom: var(--space-1);
+}
+
+[data-component="checklist"] .checklist-text p {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+/* Optional status indicator */
+[data-component="checklist"] .checklist-status {
+  flex-shrink: 0;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+[data-component="checklist"] .checklist-status.status-required {
+  background: var(--color-danger-alpha-10, rgba(239, 68, 68, 0.1));
+  color: var(--color-danger-text);
+}
+
+[data-component="checklist"] .checklist-status.status-optional {
+  background: var(--bg-muted);
+  color: var(--color-gray-600);
+}
+
+[data-component="checklist"] .checklist-status.status-complete {
+  background: var(--color-accent-alpha-10, rgba(16, 185, 129, 0.1));
+  color: var(--color-accent);
+}
+
+/* Card style variant */
+[data-component="checklist"][data-checklist-style="cards"] .checklist-item {
+  padding: var(--space-4);
+  margin-bottom: var(--space-3);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Minimal/flush style variant */
+[data-component="checklist"][data-checklist-style="minimal"] .checklist-item {
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--color-gray-100);
+  border-radius: 0;
+  padding: var(--space-3) 0;
+}
+
+[data-component="checklist"][data-checklist-style="minimal"] .checklist-item:last-child {
+  border-bottom: none;
+}
+
+/* Numbered variant — CSS counter replaces checkbox */
+[data-component="checklist"][data-checklist-style="numbered"] .checklist-item::before {
+  content: counter(checklist);
+  border-radius: 50%;
+  background: var(--color-primary-alpha-10);
+  border-color: transparent;
+  color: var(--color-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+}
+
+[data-component="checklist"][data-checklist-style="numbered"] .checklist-item.completed::before {
+  content: '✓';
+  background: var(--color-accent);
+  color: var(--color-white);
+}
+
+/* Progress indicator for checklist */
+[data-component="checklist"] .checklist-progress {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+  padding: var(--space-3);
+  background: var(--bg-subtle);
+  border-radius: var(--radius-md);
+}
+
+[data-component="checklist"] .checklist-progress-bar {
+  flex: 1;
+  height: 8px;
+  background: var(--bg-inset);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+[data-component="checklist"] .checklist-progress-fill {
+  height: 100%;
+  background: var(--color-accent);
+  border-radius: var(--radius-full);
+  transition: width var(--transition-normal);
+}
+
+[data-component="checklist"] .checklist-progress-text {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+@media (max-width: 640px) {
+  [data-component="checklist"] .checklist-item {
+    flex-wrap: wrap;
+  }
+
+  [data-component="checklist"] .checklist-status {
+    margin-left: calc(24px + var(--space-3));
+    margin-top: var(--space-2);
+  }
+}

package/framework/css/components/collapse.css

@@ -0,0 +1,96 @@
+/* ============================================================================
+   COLLAPSE COMPONENT - Show More / Hide Content
+   ============================================================================
+   
+   PURPOSE: Toggleable content panels for expandable sections
+   
+   INCLUDES:
+   - Collapse panel container with max-height animation
+   - Toggle trigger button
+   - Show/Hide text switching
+   - Expanded state management
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   
+   USED BY:
+   - Content expansion/collapse interactions
+   - Additional information disclosure
+   - Space-saving content organization
+   
+   AI DEBUGGING TIPS:
+   - Content not expanding? Check max-height value (may be too small)
+   - Animation janky? Verify transition: max-height timing
+   - Show text not toggling? Check .expanded .collapse-text-* classes
+   - Mobile height issues? Content might exceed max-height on small screens
+   
+   STRUCTURE:
+   1. Collapse panel container (40-55)
+   2. Toggle trigger button (60-75)
+   3. Text switching (80-95)
+   4. Responsive (100-110)
+   
+   ============================================================================ */
+
+/* ============================================================================
+   COLLAPSE PANEL (Show More / Less)
+   ============================================================================ */
+
+.collapse-panel {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.35s ease-in-out;
+}
+
+.collapse-trigger {
+  background: none !important;
+  border: none !important;
+  color: var(--color-primary) !important;
+  text-decoration: underline;
+  cursor: pointer;
+  padding: var(--space-1) 0 !important;
+  font-weight: var(--font-weight-semibold);
+  box-shadow: none !important;
+}
+
+.collapse-trigger:hover {
+  color: var(--color-primary-hover, var(--color-primary));
+}
+
+/* Hide the "Hide" text by default */
+.collapse-text-hide {
+  display: none;
+}
+
+/* When expanded, show the "Hide" text and hide the "Show" text */
+.expanded .collapse-text-show {
+  display: none;
+}
+
+.expanded .collapse-text-hide {
+  display: inline;
+}
+
+/* ============================================================================
+   EXPANDED PANEL STATE
+   ============================================================================ */
+
+.expanded .collapse-panel {
+  max-height: 150rem;
+  /* Approx 2400px - increased to accommodate complex content */
+  transition: max-height 0.5s ease-in;
+}
+
+/* ============================================================================
+   REDUCED MOTION SUPPORT
+   ============================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .collapse-panel {
+    transition: none;
+  }
+
+  .expanded .collapse-panel {
+    max-height: none;
+  }
+}

package/framework/css/components/comparison.css

@@ -0,0 +1,33 @@
+/* ========================================
+   UI COMPONENT: Comparison (Side-by-Side)
+   Use for: Comparing two options
+   ======================================== */
+[data-component="comparison"] {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-6);
+}
+
+[data-component="comparison"] .comparison-item {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-6);
+  background: var(--bg-surface);
+  border: 2px solid var(--color-gray-200);
+  border-radius: var(--radius-lg);
+}
+
+[data-component="comparison"] .comparison-item.highlight {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
+}
+
+[data-component="comparison"] .comparison-item h3 {
+  margin-top: 0;
+}
+
+@media (max-width: 768px) {
+  [data-component="comparison"] {
+    grid-template-columns: 1fr;
+  }
+}

package/framework/css/components/content-image.css

@@ -0,0 +1,36 @@
+/* ========================================
+   UI COMPONENT: Content + Image
+   Use for: Text with diagram/screenshot
+   ======================================== */
+[data-component="content-image"] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-6);
+  align-items: center;
+}
+
+[data-component="content-image"].reverse {
+  direction: rtl;
+}
+
+[data-component="content-image"].reverse>* {
+  direction: ltr;
+}
+
+[data-component="content-image"] img {
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+}
+
+@media (max-width: 768px) {
+  [data-component="content-image"] {
+    grid-template-columns: 1fr;
+    direction: ltr;
+  }
+
+  [data-component="content-image"].reverse {
+    direction: ltr;
+  }
+}