coursecode 0.1.0

package/framework/css/components/tabs.css

@@ -0,0 +1,347 @@
+/* ============================================================================
+   TABS - Tab navigation and content panels
+   ============================================================================
+   
+   PURPOSE: Organize content into switchable panels with tab navigation
+   
+   INCLUDES:
+   - Tab list container
+   - Tab buttons with states (default, hover, active)
+   - Tab content panels
+   - Fade-in animation
+   - Focus states
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   
+   USED BY:
+   - Content slides with multiple sections
+   - Assessment navigation
+   - Multi-step forms
+   
+   AI DEBUGGING TIPS:
+   - Tab content not showing? Check .active class on both button and content
+   - Tab content flashing? Check [hidden] attribute isn't set
+   - Tabs not clickable? Verify button elements, not divs
+   - Wrong tab highlighted? Only one .tab-button should have .active class
+   - Animation not working? Check @media (prefers-reduced-motion)
+   
+   STRUCTURE:
+   1. Tab list container (40-50)
+   2. Tab buttons (55-110)
+   3. Tab content panels (115-140)
+   4. Animations (145-155)
+   
+   COMMON CLASSES:
+   .content-tabs         - Tab list container (ul/div)
+   .assessment-tabs      - Assessment-specific tab list
+   .tab-button           - Individual tab button
+   .assessment-tab       - Assessment-specific tab button
+   .active               - Active state (add to button and content)
+   .tab-content          - Tab content panel
+   .assessment-content   - Assessment-specific content panel
+   
+   LAST UPDATED: 2024-11-17
+   ============================================================================ */
+
+/* ============================================================================
+   TAB SYSTEM - Unified for all tab types
+   ============================================================================ */
+
+.content-tabs,
+.assessment-tabs,
+.tab-list {
+  display: flex;
+  gap: var(--space-2);
+  padding: 0;
+  list-style: none;
+}
+
+/* Tab Buttons */
+.tab-button,
+.assessment-tab {
+  background: transparent;
+  border: var(--border-width-thin) solid var(--color-gray-300);
+  border-bottom: none;
+  padding: var(--space-3) var(--space-5);
+  cursor: pointer;
+  transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
+  color: var(--text-secondary);
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-base);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  position: relative;
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.tab-button:hover,
+.assessment-tab:hover {
+  background: var(--color-secondary-alpha-05);
+  color: var(--color-secondary);
+}
+
+.tab-button:focus-visible,
+.assessment-tab:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.tab-button.active,
+.assessment-tab.active {
+  background: var(--bg-surface);
+  color: var(--color-primary);
+  border-bottom: var(--border-width-thick) solid;
+  border-bottom-color: var(--color-secondary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.tab-icon {
+  font-size: 1.2em;
+  line-height: 1;
+}
+
+/* Tab Content Panels */
+.tab-content,
+.assessment-content {
+  display: none;
+  animation: fadeIn 0.3s ease;
+  padding: var(--space-6);
+  background: var(--bg-surface);
+  border: var(--border-width-thin) solid var(--color-gray-300);
+  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+}
+
+.tab-content.active,
+.assessment-content.active {
+  display: block;
+}
+
+.tab-content[hidden],
+.assessment-content[hidden] {
+  display: none;
+}
+
+/* Fade-in Animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Reduced Motion Support */
+@media (prefers-reduced-motion: reduce) {
+
+  .tab-content,
+  .assessment-content {
+    animation: none;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+
+/* ============================================================================
+   TAB STYLE VARIANTS
+   ============================================================================
+   
+   Apply these data attributes to the tab container (e.g., .content-tabs)
+   to change the visual appearance of tabs.
+   
+   USAGE:
+   <ul class="content-tabs" data-tab-style="pills">
+     <li><button class="tab-button active">Tab 1</button></li>
+     ...
+   </ul>
+   
+   ============================================================================ */
+
+/* --------------------------------------
+   Pills Style - Pill-shaped tabs
+   -------------------------------------- */
+[data-tab-style="pills"] .tab-button,
+[data-tab-style="pills"] .assessment-tab {
+  border-bottom: none;
+  border-radius: var(--radius-full);
+  margin-bottom: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+}
+
+[data-tab-style="pills"].content-tabs,
+[data-tab-style="pills"].assessment-tabs,
+[data-tab-style="pills"].tab-list {
+  border-bottom: none;
+  gap: var(--space-2);
+}
+
+[data-tab-style="pills"] .tab-button.active,
+[data-tab-style="pills"] .assessment-tab.active {
+  background: var(--color-primary);
+  color: var(--color-white);
+  border-bottom-color: transparent;
+}
+
+[data-tab-style="pills"] .tab-button:hover:not(.active),
+[data-tab-style="pills"] .assessment-tab:hover:not(.active) {
+  background: var(--color-primary-alpha-10);
+  color: var(--color-primary);
+}
+
+[data-tab-style="pills"]+.tab-content,
+[data-tab-style="pills"]~.tab-content {
+  border-radius: var(--radius-lg);
+}
+
+/* --------------------------------------
+   Buttons Style - Button-like tabs
+   -------------------------------------- */
+[data-tab-style="buttons"] .tab-button,
+[data-tab-style="buttons"] .assessment-tab {
+  border: 2px solid var(--color-gray-300);
+  border-bottom: 2px solid var(--color-gray-300);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  background: var(--bg-surface);
+}
+
+[data-tab-style="buttons"].content-tabs,
+[data-tab-style="buttons"].assessment-tabs,
+[data-tab-style="buttons"].tab-list {
+  border-bottom: none;
+  gap: var(--space-2);
+}
+
+[data-tab-style="buttons"] .tab-button.active,
+[data-tab-style="buttons"] .assessment-tab.active {
+  background: var(--color-primary);
+  color: var(--color-white);
+  border-color: var(--color-primary);
+}
+
+[data-tab-style="buttons"] .tab-button:hover:not(.active),
+[data-tab-style="buttons"] .assessment-tab:hover:not(.active) {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  background: var(--bg-surface);
+}
+
+[data-tab-style="buttons"]+.tab-content,
+[data-tab-style="buttons"]~.tab-content {
+  border-radius: var(--radius-lg);
+}
+
+/* --------------------------------------
+   Minimal Style - Text only, subtle indicator
+   -------------------------------------- */
+[data-tab-style="minimal"] .tab-button,
+[data-tab-style="minimal"] .assessment-tab {
+  border-bottom: none;
+  border-radius: 0;
+  padding: var(--space-3) var(--space-4);
+  position: relative;
+}
+
+[data-tab-style="minimal"].content-tabs,
+[data-tab-style="minimal"].assessment-tabs,
+[data-tab-style="minimal"].tab-list {
+  border-bottom: 1px solid var(--color-gray-200);
+}
+
+[data-tab-style="minimal"] .tab-button::after,
+[data-tab-style="minimal"] .assessment-tab::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: transparent;
+  transition: background var(--transition-fast);
+}
+
+[data-tab-style="minimal"] .tab-button.active::after,
+[data-tab-style="minimal"] .assessment-tab.active::after {
+  background: var(--color-primary);
+}
+
+[data-tab-style="minimal"] .tab-button.active,
+[data-tab-style="minimal"] .assessment-tab.active {
+  background: transparent;
+  color: var(--color-primary);
+  border-bottom-color: transparent;
+}
+
+[data-tab-style="minimal"] .tab-button:hover:not(.active),
+[data-tab-style="minimal"] .assessment-tab:hover:not(.active) {
+  background: transparent;
+  color: var(--color-primary);
+}
+
+[data-tab-style="minimal"]+.tab-content,
+[data-tab-style="minimal"]~.tab-content {
+  box-shadow: none;
+  padding-left: 0;
+  padding-right: 0;
+  background: transparent;
+}
+
+/* --------------------------------------
+   Boxed Style - Tabs inside a bordered container
+   -------------------------------------- */
+[data-tab-style="boxed"].content-tabs,
+[data-tab-style="boxed"].assessment-tabs,
+[data-tab-style="boxed"].tab-list {
+  background: var(--bg-muted);
+  border: 1px solid var(--color-gray-200);
+  border-bottom: 1px solid var(--color-gray-200);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  padding: var(--space-2);
+  gap: var(--space-1);
+}
+
+[data-tab-style="boxed"] .tab-button,
+[data-tab-style="boxed"] .assessment-tab {
+  border-bottom: none;
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-4);
+}
+
+[data-tab-style="boxed"] .tab-button.active,
+[data-tab-style="boxed"] .assessment-tab.active {
+  background: var(--bg-surface);
+  color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+  border-bottom-color: transparent;
+}
+
+[data-tab-style="boxed"] .tab-button:hover:not(.active),
+[data-tab-style="boxed"] .assessment-tab:hover:not(.active) {
+  background: var(--bg-subtle);
+}
+
+[data-tab-style="boxed"]+.tab-content,
+[data-tab-style="boxed"]~.tab-content {
+  border: 1px solid var(--color-gray-200);
+  border-top: none;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+}

package/framework/css/components/timeline.css

@@ -0,0 +1,154 @@
+/* ========================================
+   UI COMPONENT: Timeline
+   Use for: Chronological events, processes, history
+   Variants: icon, compact
+   ======================================== */
+[data-component="timeline"] {
+  max-width: 900px;
+  margin: 0 auto;
+  position: relative;
+  padding: var(--space-8) 0 var(--space-4);
+}
+
+/* Vertical line connecting timeline items */
+[data-component="timeline"]::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: calc(var(--space-8) + var(--space-8) + var(--space-4));
+  bottom: calc(var(--space-4) + var(--space-6));
+  width: 3px;
+  background: var(--color-gray-200);
+  transform: translateX(-50%);
+}
+
+
+
+[data-component="timeline"] .timeline-item {
+  display: flex;
+  margin-bottom: var(--space-8);
+  position: relative;
+  padding-top: var(--space-8);
+}
+
+[data-component="timeline"] .timeline-item:last-child {
+  margin-bottom: 0;
+}
+
+/* Alternating left/right layout */
+[data-component="timeline"] .timeline-item:nth-child(odd) {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+
+[data-component="timeline"] .timeline-item:nth-child(even) {
+  text-align: left;
+}
+
+/* Timeline content container */
+[data-component="timeline"] .timeline-content {
+  width: calc(50% - 40px);
+  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);
+}
+
+/* Timeline marker (center node) */
+[data-component="timeline"] .timeline-marker {
+  position: absolute;
+  left: 50%;
+  top: calc(var(--space-8) + var(--space-5));
+  width: 16px;
+  height: 16px;
+  background: var(--color-primary);
+  border: 3px solid var(--bg-surface);
+  border-radius: 50%;
+  transform: translateX(-50%);
+  box-shadow: 0 0 0 3px var(--color-primary);
+  z-index: 2;
+}
+
+/* Active/highlighted timeline marker */
+[data-component="timeline"] .timeline-item.active .timeline-marker {
+  width: 20px;
+  height: 20px;
+  background: var(--color-secondary);
+  box-shadow: 0 0 0 3px var(--color-secondary);
+}
+
+/* Timeline date/label - positioned above marker with solid background */
+[data-component="timeline"] .timeline-date {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-white);
+  background: var(--color-primary);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+  z-index: 3;
+  box-shadow: var(--shadow-sm);
+}
+
+[data-component="timeline"] .timeline-content h3 {
+  margin-top: 0;
+  margin-bottom: var(--space-2);
+  color: var(--color-primary);
+}
+
+[data-component="timeline"] .timeline-content p {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+/* Icon variant for timeline markers */
+[data-component="timeline"][data-style="icon"] .timeline-marker {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-lg);
+}
+
+/* Compact timeline variant */
+[data-component="timeline"][data-style="compact"] .timeline-content {
+  padding: var(--space-3);
+}
+
+[data-component="timeline"][data-style="compact"] .timeline-marker {
+  width: 14px;
+  height: 14px;
+}
+
+@media (max-width: 768px) {
+
+  /* Stack timeline on mobile - all items to the right */
+  [data-component="timeline"]::before {
+    left: 20px;
+  }
+
+  [data-component="timeline"] .timeline-item,
+  [data-component="timeline"] .timeline-item:nth-child(odd) {
+    flex-direction: row;
+    text-align: left;
+    padding-left: 50px;
+  }
+
+  [data-component="timeline"] .timeline-content {
+    width: 100%;
+  }
+
+  [data-component="timeline"] .timeline-marker {
+    left: 20px;
+  }
+
+  [data-component="timeline"] .timeline-date {
+    left: 20px;
+  }
+}

package/framework/css/components/toggle.css

@@ -0,0 +1,95 @@
+/* ============================================================================
+   TOGGLE SWITCHES - Custom styled toggle switches
+   ============================================================================
+   
+   PURPOSE: Accessible toggle switch component for boolean state switching
+   
+   INCLUDES:
+   - Toggle switch styling (on/off states)
+   - Color variations (primary, success)
+   - Focus states and disabled states
+   - Label positioning
+   
+   DEPENDENCIES:
+   - Requires: design-tokens.css (for CSS variables)
+   - Requires: ui-components/toggle-group.js (JavaScript component)
+   
+   USED BY: Settings, feature toggles, boolean preferences
+   
+   USAGE:
+   <label class="toggle-switch">
+     <input type="checkbox" />
+     <span class="toggle-slider"></span>
+     <span class="toggle-label">Feature Name</span>
+   </label>
+   
+   ============================================================================ */
+
+.toggle-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: var(--space-3);
+  user-select: none;
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.toggle-slider {
+  position: relative;
+  width: 48px;
+  height: 24px;
+  background-color: var(--color-gray-400);
+  border-radius: 24px;
+  transition: background-color var(--transition-fast);
+  flex-shrink: 0;
+}
+
+.toggle-slider::before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: transform var(--transition-fast);
+  border-radius: 50%;
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background-color: var(--color-primary);
+}
+
+.toggle-switch.toggle-success input:checked + .toggle-slider {
+  background-color: var(--color-success);
+}
+
+.toggle-switch input:focus-visible + .toggle-slider {
+  box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
+}
+
+.toggle-switch input:checked + .toggle-slider::before {
+  transform: translateX(24px);
+}
+
+.toggle-switch input:disabled + .toggle-slider {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.toggle-label {
+  font-size: var(--font-size-base);
+  color: var(--color-gray-900);
+  font-weight: var(--font-weight-medium);
+}