coursecode 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (362) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +322 -0
  3. package/THIRD_PARTY_NOTICES.md +22 -0
  4. package/bin/cli.js +331 -0
  5. package/framework/assets/logo-coursecode-black.svg +14 -0
  6. package/framework/assets/logo-coursecode-white.svg +14 -0
  7. package/framework/assets/logo-coursecode.svg +14 -0
  8. package/framework/css/01-base.css +160 -0
  9. package/framework/css/02-layout.css +499 -0
  10. package/framework/css/accessibility.css +834 -0
  11. package/framework/css/components/accordions.css +710 -0
  12. package/framework/css/components/assessments.css +520 -0
  13. package/framework/css/components/audio-player.css +570 -0
  14. package/framework/css/components/badges.css +80 -0
  15. package/framework/css/components/breadcrumbs.css +87 -0
  16. package/framework/css/components/buttons.css +707 -0
  17. package/framework/css/components/callouts.css +1280 -0
  18. package/framework/css/components/cards.css +475 -0
  19. package/framework/css/components/carousel.css +193 -0
  20. package/framework/css/components/checkbox-group.css +123 -0
  21. package/framework/css/components/checklist.css +203 -0
  22. package/framework/css/components/collapse.css +96 -0
  23. package/framework/css/components/comparison.css +33 -0
  24. package/framework/css/components/content-image.css +36 -0
  25. package/framework/css/components/document-gallery.css +425 -0
  26. package/framework/css/components/dropdown.css +115 -0
  27. package/framework/css/components/embed-frame.css +142 -0
  28. package/framework/css/components/engagement.css +412 -0
  29. package/framework/css/components/features.css +35 -0
  30. package/framework/css/components/flip-cards.css +253 -0
  31. package/framework/css/components/footer.css +353 -0
  32. package/framework/css/components/forms.css +294 -0
  33. package/framework/css/components/hero.css +216 -0
  34. package/framework/css/components/images.css +528 -0
  35. package/framework/css/components/interactive-timeline.css +274 -0
  36. package/framework/css/components/intro-cards.css +30 -0
  37. package/framework/css/components/lightbox.css +666 -0
  38. package/framework/css/components/loading.css +65 -0
  39. package/framework/css/components/modals.css +235 -0
  40. package/framework/css/components/notifications.css +107 -0
  41. package/framework/css/components/quote.css +150 -0
  42. package/framework/css/components/sidebar.css +684 -0
  43. package/framework/css/components/slide-header.css +52 -0
  44. package/framework/css/components/spinner.css +62 -0
  45. package/framework/css/components/stats.css +44 -0
  46. package/framework/css/components/steps.css +232 -0
  47. package/framework/css/components/tables.css +90 -0
  48. package/framework/css/components/tabs.css +347 -0
  49. package/framework/css/components/timeline.css +154 -0
  50. package/framework/css/components/toggle.css +95 -0
  51. package/framework/css/components/tooltip.css +226 -0
  52. package/framework/css/components/video-player.css +438 -0
  53. package/framework/css/design-tokens.css +707 -0
  54. package/framework/css/framework.css +86 -0
  55. package/framework/css/interactions/accessibility.css +75 -0
  56. package/framework/css/interactions/base.css +92 -0
  57. package/framework/css/interactions/drag-drop.css +295 -0
  58. package/framework/css/interactions/fill-in-the-blank.css +236 -0
  59. package/framework/css/interactions/hotspots.css +69 -0
  60. package/framework/css/interactions/index.css +45 -0
  61. package/framework/css/interactions/interactive-image.css +359 -0
  62. package/framework/css/interactions/likert.css +126 -0
  63. package/framework/css/interactions/matching.css +354 -0
  64. package/framework/css/interactions/numeric-input.css +78 -0
  65. package/framework/css/interactions/sequencing.css +378 -0
  66. package/framework/css/interactions/true-false.css +177 -0
  67. package/framework/css/layouts/article.css +258 -0
  68. package/framework/css/layouts/base.css +30 -0
  69. package/framework/css/layouts/canvas.css +38 -0
  70. package/framework/css/layouts/focused.css +236 -0
  71. package/framework/css/layouts/index.css +29 -0
  72. package/framework/css/layouts/presentation.css +191 -0
  73. package/framework/css/layouts/traditional.css +52 -0
  74. package/framework/css/responsive.css +439 -0
  75. package/framework/css/utilities/accessibility-utils.css +59 -0
  76. package/framework/css/utilities/animations.css +419 -0
  77. package/framework/css/utilities/borders.css +72 -0
  78. package/framework/css/utilities/colors.css +76 -0
  79. package/framework/css/utilities/container.css +46 -0
  80. package/framework/css/utilities/decorative.css +442 -0
  81. package/framework/css/utilities/display.css +257 -0
  82. package/framework/css/utilities/flexbox.css +80 -0
  83. package/framework/css/utilities/grid.css +69 -0
  84. package/framework/css/utilities/icons.css +534 -0
  85. package/framework/css/utilities/lists.css +190 -0
  86. package/framework/css/utilities/spacing.css +167 -0
  87. package/framework/css/utilities/tables.css +81 -0
  88. package/framework/css/utilities/typography.css +159 -0
  89. package/framework/css/utilities/visibility.css +117 -0
  90. package/framework/docs/COURSE_AUTHORING_GUIDE.md +1773 -0
  91. package/framework/docs/COURSE_OUTLINE_GUIDE.md +725 -0
  92. package/framework/docs/COURSE_OUTLINE_TEMPLATE.md +161 -0
  93. package/framework/docs/DATA_MODEL.md +409 -0
  94. package/framework/docs/FRAMEWORK_GUIDE.md +1088 -0
  95. package/framework/docs/USER_GUIDE.md +583 -0
  96. package/framework/docs/examples/cloudflare-channel-relay.js +169 -0
  97. package/framework/docs/examples/cloudflare-data-worker.js +102 -0
  98. package/framework/docs/examples/cloudflare-error-worker.js +228 -0
  99. package/framework/index.html +175 -0
  100. package/framework/js/app/AppActions.js +410 -0
  101. package/framework/js/app/AppState.js +225 -0
  102. package/framework/js/app/AppUI.js +616 -0
  103. package/framework/js/assessment/AssessmentActions.js +615 -0
  104. package/framework/js/assessment/AssessmentFactory.js +471 -0
  105. package/framework/js/assessment/AssessmentState.js +322 -0
  106. package/framework/js/assessment/AssessmentUI.js +451 -0
  107. package/framework/js/automation/api-engagement.js +196 -0
  108. package/framework/js/automation/api-interactions.js +167 -0
  109. package/framework/js/automation/api.js +242 -0
  110. package/framework/js/automation/index.js +41 -0
  111. package/framework/js/components/interactions/drag-drop.js +884 -0
  112. package/framework/js/components/interactions/fill-in.js +535 -0
  113. package/framework/js/components/interactions/hotspot.js +702 -0
  114. package/framework/js/components/interactions/interaction-base.js +511 -0
  115. package/framework/js/components/interactions/likert.js +301 -0
  116. package/framework/js/components/interactions/matching.js +699 -0
  117. package/framework/js/components/interactions/multiple-choice.js +377 -0
  118. package/framework/js/components/interactions/numeric.js +271 -0
  119. package/framework/js/components/interactions/sequencing.js +423 -0
  120. package/framework/js/components/interactions/true-false.js +241 -0
  121. package/framework/js/components/ui-components/accordion.js +442 -0
  122. package/framework/js/components/ui-components/alert.js +88 -0
  123. package/framework/js/components/ui-components/audio-player.js +1193 -0
  124. package/framework/js/components/ui-components/callout.js +121 -0
  125. package/framework/js/components/ui-components/carousel.js +145 -0
  126. package/framework/js/components/ui-components/checkbox-group.js +87 -0
  127. package/framework/js/components/ui-components/checklist.js +40 -0
  128. package/framework/js/components/ui-components/collapse.js +114 -0
  129. package/framework/js/components/ui-components/comparison.js +30 -0
  130. package/framework/js/components/ui-components/conditional-display.js +150 -0
  131. package/framework/js/components/ui-components/content-image.js +41 -0
  132. package/framework/js/components/ui-components/dropdown.js +262 -0
  133. package/framework/js/components/ui-components/embed-frame.js +274 -0
  134. package/framework/js/components/ui-components/features.js +33 -0
  135. package/framework/js/components/ui-components/flip-card.js +230 -0
  136. package/framework/js/components/ui-components/form-validator.js +76 -0
  137. package/framework/js/components/ui-components/hero.js +49 -0
  138. package/framework/js/components/ui-components/index.js +12 -0
  139. package/framework/js/components/ui-components/interactive-image.js +235 -0
  140. package/framework/js/components/ui-components/interactive-timeline.js +285 -0
  141. package/framework/js/components/ui-components/intro-cards.js +35 -0
  142. package/framework/js/components/ui-components/lightbox.js +652 -0
  143. package/framework/js/components/ui-components/modal.js +386 -0
  144. package/framework/js/components/ui-components/notifications.js +145 -0
  145. package/framework/js/components/ui-components/progress.js +88 -0
  146. package/framework/js/components/ui-components/quote.js +41 -0
  147. package/framework/js/components/ui-components/stats.js +33 -0
  148. package/framework/js/components/ui-components/steps.js +41 -0
  149. package/framework/js/components/ui-components/tabs.js +255 -0
  150. package/framework/js/components/ui-components/timeline.js +42 -0
  151. package/framework/js/components/ui-components/toggle-group.js +73 -0
  152. package/framework/js/components/ui-components/tooltip.js +458 -0
  153. package/framework/js/components/ui-components/value-display.js +133 -0
  154. package/framework/js/components/ui-components/video-player.js +686 -0
  155. package/framework/js/core/component-catalog.js +121 -0
  156. package/framework/js/core/event-bus.js +178 -0
  157. package/framework/js/core/interaction-catalog.js +149 -0
  158. package/framework/js/dev/runtime-linter.js +1725 -0
  159. package/framework/js/drivers/cmi5-driver.js +768 -0
  160. package/framework/js/drivers/driver-factory.js +77 -0
  161. package/framework/js/drivers/driver-interface.js +110 -0
  162. package/framework/js/drivers/http-driver-base.js +241 -0
  163. package/framework/js/drivers/lti-driver.js +508 -0
  164. package/framework/js/drivers/proxy-driver.js +444 -0
  165. package/framework/js/drivers/scorm-12-driver.js +560 -0
  166. package/framework/js/drivers/scorm-2004-driver.js +775 -0
  167. package/framework/js/drivers/scorm-driver-base.js +112 -0
  168. package/framework/js/engagement/engagement-manager.js +404 -0
  169. package/framework/js/engagement/engagement-progress.js +191 -0
  170. package/framework/js/engagement/engagement-trackers.js +215 -0
  171. package/framework/js/engagement/requirement-strategies.js +268 -0
  172. package/framework/js/main.js +727 -0
  173. package/framework/js/managers/accessibility-manager.js +499 -0
  174. package/framework/js/managers/assessment-manager.js +230 -0
  175. package/framework/js/managers/audio-manager.js +944 -0
  176. package/framework/js/managers/comment-manager.js +88 -0
  177. package/framework/js/managers/flag-manager.js +86 -0
  178. package/framework/js/managers/interaction-manager.js +254 -0
  179. package/framework/js/managers/interaction-registry.js +96 -0
  180. package/framework/js/managers/objective-manager.js +423 -0
  181. package/framework/js/managers/score-manager.js +441 -0
  182. package/framework/js/managers/video-manager.js +536 -0
  183. package/framework/js/navigation/Breadcrumbs.js +234 -0
  184. package/framework/js/navigation/NavigationActions.js +1132 -0
  185. package/framework/js/navigation/NavigationState.js +276 -0
  186. package/framework/js/navigation/NavigationUI.js +574 -0
  187. package/framework/js/navigation/document-gallery.js +357 -0
  188. package/framework/js/navigation/navigation-helpers.js +175 -0
  189. package/framework/js/navigation/navigation-validators.js +174 -0
  190. package/framework/js/state/index.js +8 -0
  191. package/framework/js/state/lms-connection.js +482 -0
  192. package/framework/js/state/lms-error-utils.js +58 -0
  193. package/framework/js/state/state-commits.js +200 -0
  194. package/framework/js/state/state-domains.js +86 -0
  195. package/framework/js/state/state-manager.js +502 -0
  196. package/framework/js/state/state-validation.js +311 -0
  197. package/framework/js/state/transaction-log.js +41 -0
  198. package/framework/js/state/xapi-statement-service.js +325 -0
  199. package/framework/js/utilities/access-control.js +99 -0
  200. package/framework/js/utilities/breakpoint-manager.js +315 -0
  201. package/framework/js/utilities/canvas-slide.js +35 -0
  202. package/framework/js/utilities/conditional-display.js +388 -0
  203. package/framework/js/utilities/course-channel.js +214 -0
  204. package/framework/js/utilities/course-helpers.js +420 -0
  205. package/framework/js/utilities/data-reporter.js +273 -0
  206. package/framework/js/utilities/error-reporter.js +313 -0
  207. package/framework/js/utilities/hotspot-helper.js +341 -0
  208. package/framework/js/utilities/icons.js +348 -0
  209. package/framework/js/utilities/logger.js +92 -0
  210. package/framework/js/utilities/markdown-renderer.js +45 -0
  211. package/framework/js/utilities/scroll-tracker.js +68 -0
  212. package/framework/js/utilities/ui-initializer.js +146 -0
  213. package/framework/js/utilities/utilities.js +293 -0
  214. package/framework/js/utilities/view-manager.js +227 -0
  215. package/framework/js/validation/html-validators.js +422 -0
  216. package/framework/js/validation/scorm-validators.js +438 -0
  217. package/framework/js/vendor/pipwerks.js +931 -0
  218. package/framework/scripts/generate-narration.js +629 -0
  219. package/framework/scripts/tts-providers/azure-provider.js +178 -0
  220. package/framework/scripts/tts-providers/base-provider.js +81 -0
  221. package/framework/scripts/tts-providers/deepgram-provider.js +135 -0
  222. package/framework/scripts/tts-providers/elevenlabs-provider.js +148 -0
  223. package/framework/scripts/tts-providers/google-provider.js +272 -0
  224. package/framework/scripts/tts-providers/index.js +158 -0
  225. package/framework/scripts/tts-providers/openai-provider.js +143 -0
  226. package/framework/version.json +63 -0
  227. package/lib/authoring-api.js +919 -0
  228. package/lib/build-linter.js +450 -0
  229. package/lib/build-packaging.js +186 -0
  230. package/lib/build.js +88 -0
  231. package/lib/cloud.js +691 -0
  232. package/lib/convert.js +341 -0
  233. package/lib/course-parser.js +936 -0
  234. package/lib/course-writer.js +258 -0
  235. package/lib/create.js +248 -0
  236. package/lib/css-index.js +237 -0
  237. package/lib/dev.js +51 -0
  238. package/lib/export-content.js +1246 -0
  239. package/lib/headless-browser.js +413 -0
  240. package/lib/import.js +377 -0
  241. package/lib/index.js +80 -0
  242. package/lib/info.js +79 -0
  243. package/lib/interaction-formatters.js +568 -0
  244. package/lib/manifest/cmi5-manifest.js +63 -0
  245. package/lib/manifest/lti-tool-config.js +53 -0
  246. package/lib/manifest/manifest-factory.js +99 -0
  247. package/lib/manifest/scorm-12-manifest.js +61 -0
  248. package/lib/manifest/scorm-2004-manifest.js +94 -0
  249. package/lib/manifest/scorm-proxy-manifest.js +104 -0
  250. package/lib/manifest-parser.js +96 -0
  251. package/lib/mcp-prompts.js +753 -0
  252. package/lib/mcp-server.js +316 -0
  253. package/lib/narration.js +53 -0
  254. package/lib/pdf-structure.js +142 -0
  255. package/lib/preview-export.js +231 -0
  256. package/lib/preview-routes-api.js +662 -0
  257. package/lib/preview-routes-editing.js +159 -0
  258. package/lib/preview-routes-lms.js +230 -0
  259. package/lib/preview-server.js +564 -0
  260. package/lib/project-utils.js +269 -0
  261. package/lib/proxy-templates/proxy.html +68 -0
  262. package/lib/proxy-templates/scorm-bridge.js +112 -0
  263. package/lib/scaffold.js +193 -0
  264. package/lib/schema-extractor.js +361 -0
  265. package/lib/slide-source-editor.js +586 -0
  266. package/lib/stub-player/app-viewer.js +195 -0
  267. package/lib/stub-player/app.js +370 -0
  268. package/lib/stub-player/catalog-panel.js +312 -0
  269. package/lib/stub-player/config-panel.js +1303 -0
  270. package/lib/stub-player/content-generator.js +586 -0
  271. package/lib/stub-player/content-viewer.js +173 -0
  272. package/lib/stub-player/debug-panel.js +420 -0
  273. package/lib/stub-player/edit-mode.js +922 -0
  274. package/lib/stub-player/edit-utils.js +400 -0
  275. package/lib/stub-player/header-bar.js +354 -0
  276. package/lib/stub-player/interaction-editor.js +210 -0
  277. package/lib/stub-player/interactions-panel.js +565 -0
  278. package/lib/stub-player/lms-api.js +1094 -0
  279. package/lib/stub-player/login-screen.js +74 -0
  280. package/lib/stub-player/outline-mode.js +689 -0
  281. package/lib/stub-player/styles/_assessments-panel.css +245 -0
  282. package/lib/stub-player/styles/_base.css +89 -0
  283. package/lib/stub-player/styles/_catalog-icons.css +96 -0
  284. package/lib/stub-player/styles/_catalog-panel.css +291 -0
  285. package/lib/stub-player/styles/_config-panel.css +636 -0
  286. package/lib/stub-player/styles/_content-viewer.css +834 -0
  287. package/lib/stub-player/styles/_debug-panel.css +576 -0
  288. package/lib/stub-player/styles/_edit-mode.css +128 -0
  289. package/lib/stub-player/styles/_header-bar.css +343 -0
  290. package/lib/stub-player/styles/_interaction-editor.css +140 -0
  291. package/lib/stub-player/styles/_interactions-panel.css +1038 -0
  292. package/lib/stub-player/styles/_login-screen.css +102 -0
  293. package/lib/stub-player/styles/_outline-mode.css +752 -0
  294. package/lib/stub-player/styles.css +15 -0
  295. package/lib/stub-player.js +160 -0
  296. package/lib/test-data-reporting.js +176 -0
  297. package/lib/test-error-reporting.js +146 -0
  298. package/lib/token.js +86 -0
  299. package/lib/upgrade.js +257 -0
  300. package/lib/validation-rules.js +517 -0
  301. package/lib/vite-plugin-content-discovery.js +296 -0
  302. package/package.json +108 -0
  303. package/schemas/XMLSchema.dtd +402 -0
  304. package/schemas/adlcp_v1p3.xsd +111 -0
  305. package/schemas/adlnav_v1p3.xsd +61 -0
  306. package/schemas/adlseq_v1p3.xsd +93 -0
  307. package/schemas/common/anyElement.xsd +27 -0
  308. package/schemas/common/dataTypes.xsd +138 -0
  309. package/schemas/common/elementNames.xsd +767 -0
  310. package/schemas/common/elementTypes.xsd +786 -0
  311. package/schemas/common/rootElement.xsd +31 -0
  312. package/schemas/common/vocabTypes.xsd +345 -0
  313. package/schemas/common/vocabValues.xsd +257 -0
  314. package/schemas/datatypes.dtd +203 -0
  315. package/schemas/ims_xml.xsd +35 -0
  316. package/schemas/imscp_v1p1.xsd +368 -0
  317. package/schemas/imsss_v1p0.xsd +67 -0
  318. package/schemas/imsss_v1p0auxresource.xsd +19 -0
  319. package/schemas/imsss_v1p0control.xsd +20 -0
  320. package/schemas/imsss_v1p0delivery.xsd +17 -0
  321. package/schemas/imsss_v1p0limit.xsd +47 -0
  322. package/schemas/imsss_v1p0objective.xsd +67 -0
  323. package/schemas/imsss_v1p0random.xsd +16 -0
  324. package/schemas/imsss_v1p0rollup.xsd +46 -0
  325. package/schemas/imsss_v1p0seqrule.xsd +108 -0
  326. package/schemas/imsss_v1p0util.xsd +94 -0
  327. package/schemas/license.txt +17 -0
  328. package/schemas/lom.xsd +102 -0
  329. package/schemas/lomCustom.xsd +62 -0
  330. package/schemas/lomLoose.xsd +62 -0
  331. package/schemas/lomStrict.xsd +62 -0
  332. package/schemas/xml.xsd +81 -0
  333. package/template/.env.example +92 -0
  334. package/template/course/assets/audio/example-intro.mp3 +0 -0
  335. package/template/course/assets/audio/example-ui-demo--compact-player.mp3 +0 -0
  336. package/template/course/assets/audio/example-ui-demo--demo-modal.mp3 +0 -0
  337. package/template/course/assets/audio/example-ui-demo--full-player.mp3 +0 -0
  338. package/template/course/assets/docs/example_md_1.md +39 -0
  339. package/template/course/assets/docs/example_md_2.md +41 -0
  340. package/template/course/assets/docs/example_pdf_1_thumbnail.png +0 -0
  341. package/template/course/assets/docs/example_pdf_2.pdf +0 -0
  342. package/template/course/assets/images/course-architecture.svg +36 -0
  343. package/template/course/assets/images/logo.svg +14 -0
  344. package/template/course/assets/widgets/counter-demo.html +190 -0
  345. package/template/course/assets/widgets/gravity-painter.html +384 -0
  346. package/template/course/course-config.js +539 -0
  347. package/template/course/icons.js +19 -0
  348. package/template/course/interactions/PLUGIN_GUIDE.md +97 -0
  349. package/template/course/slides/example-course-structure.js +138 -0
  350. package/template/course/slides/example-final-exam.js +144 -0
  351. package/template/course/slides/example-finishing.js +127 -0
  352. package/template/course/slides/example-interactions-showcase.js +615 -0
  353. package/template/course/slides/example-preview-tour.js +129 -0
  354. package/template/course/slides/example-remedial.js +143 -0
  355. package/template/course/slides/example-summary.js +103 -0
  356. package/template/course/slides/example-ui-showcase.js +1805 -0
  357. package/template/course/slides/example-welcome.js +123 -0
  358. package/template/course/slides/example-workflow.js +140 -0
  359. package/template/course/theme.css +165 -0
  360. package/template/eslint.config.js +47 -0
  361. package/template/package.json +28 -0
  362. package/template/vite.config.js +339 -0
package/framework/css/components/footer.css ADDED
@@ -0,0 +1,353 @@
1
+ /* ============================================================================
2
+ FOOTER - Navigation controls and engagement indicator container
3
+ ============================================================================
4
+
5
+ PURPOSE: Footer styling for navigation (previous/next/exit) and engagement display
6
+
7
+ INCLUDES:
8
+ - Footer container and layout
9
+ - Navigation controls flexbox
10
+ - Navigation button groups
11
+ - Exit button positioning
12
+ - Hide during loading state
13
+
14
+ DEPENDENCIES:
15
+ - Requires: design-tokens.css (for CSS variables)
16
+ - Requires: components/buttons.css (for button styles)
17
+
18
+ USED BY: All slides - core application footer
19
+
20
+ AI DEBUGGING TIPS:
21
+ - Footer not showing? Check if #loading is hiding it
22
+ - Buttons not aligned? Verify .nav-controls flexbox
23
+ - Exit button floating? Check margin-left: auto on .nav-exit-button
24
+ - Mobile footer cramped? Check responsive.css for breakpoints
25
+
26
+ STRUCTURE:
27
+ 1. Footer container (45-60)
28
+ 2. Navigation controls layout (65-85)
29
+ 3. Button groups (90-100)
30
+ 4. Exit button positioning (105-110)
31
+ 5. Loading state (115-120)
32
+ 6. Dark mode (125-130)
33
+
34
+ ============================================================================ */
35
+
36
+ /* Footer - Clean and Functional - Fixed at Bottom */
37
+ .app-footer {
38
+ display: flex;
39
+ justify-content: space-between;
40
+ align-items: center;
41
+ gap: var(--space-3);
42
+ padding: var(--footer-padding-y) var(--footer-padding-x);
43
+ border-top: var(--border-width-md) solid var(--footer-border);
44
+ background: var(--footer-bg);
45
+ color: var(--footer-text);
46
+ flex-shrink: 0;
47
+ }
48
+
49
+ /* Hide footer during initial loading */
50
+ #app:has(#loading:not([style*="display: none"])) footer {
51
+ display: none;
52
+ z-index: var(--z-fixed);
53
+ }
54
+
55
+ .nav-controls {
56
+ display: flex;
57
+ gap: var(--space-2);
58
+ align-items: center;
59
+ flex: 1;
60
+ justify-content: space-between;
61
+ }
62
+
63
+ .nav-controls .nav-nav-buttons {
64
+ display: flex;
65
+ gap: var(--space-2);
66
+ align-items: center;
67
+ }
68
+
69
+ /* Navigation button icons - slightly larger and offset to align chevrons visually */
70
+ #prevBtn>svg,
71
+ #nextBtn>svg {
72
+ width: 1.5em;
73
+ height: 1.5em;
74
+ }
75
+
76
+ /* Offset chevron whitespace for visual alignment */
77
+ #prevBtn>svg {
78
+ margin-left: -0.5em;
79
+ }
80
+
81
+ #nextBtn>svg {
82
+ margin-right: -0.25em;
83
+ }
84
+
85
+ .nav-controls .nav-exit-button {
86
+ margin-left: auto;
87
+ display: flex;
88
+ gap: var(--space-2);
89
+ align-items: center;
90
+ }
91
+
92
+ .nav-controls .btn {
93
+ font-weight: var(--font-weight-semibold);
94
+ letter-spacing: 0.01em;
95
+ }
96
+
97
+ /* Audio player sits between nav buttons and exit on desktop */
98
+ #audio-player {
99
+ flex-shrink: 0;
100
+ margin-left: auto;
101
+ }
102
+
103
+ /* When audio player is present, exit button doesn't need auto margin */
104
+ #audio-player:not([hidden])+.nav-exit-button {
105
+ margin-left: 0;
106
+ }
107
+
108
+ /* ============================================================================
109
+ FOOTER LAYOUT VARIANTS
110
+ ============================================================================
111
+
112
+ Activate a layout by adding data-footer-layout attribute to :root or footer:
113
+ <html data-footer-layout="centered"> or <footer data-footer-layout="minimal">
114
+
115
+ ========================================================================= */
116
+
117
+ /* Centered - All buttons centered */
118
+ [data-footer-layout="centered"] footer,
119
+ footer[data-footer-layout="centered"] {
120
+ justify-content: center;
121
+ }
122
+
123
+ [data-footer-layout="centered"] .nav-controls,
124
+ footer[data-footer-layout="centered"] .nav-controls {
125
+ justify-content: center;
126
+ flex: none;
127
+ }
128
+
129
+ [data-footer-layout="centered"] .nav-controls .nav-exit-button,
130
+ footer[data-footer-layout="centered"] .nav-controls .nav-exit-button {
131
+ margin-left: var(--space-6);
132
+ }
133
+
134
+ /* Minimal - Smaller, more compact */
135
+ [data-footer-layout="minimal"] footer,
136
+ footer[data-footer-layout="minimal"] {
137
+ padding: var(--space-2) var(--space-4);
138
+ border-top-width: 1px;
139
+ min-height: auto;
140
+ }
141
+
142
+ [data-footer-layout="minimal"] footer .btn,
143
+ footer[data-footer-layout="minimal"] .btn {
144
+ padding: var(--space-2) var(--space-3);
145
+ font-size: var(--font-size-sm);
146
+ min-height: 36px;
147
+ }
148
+
149
+ /* Floating - Floating buttons (for immersive slides) */
150
+ [data-footer-layout="floating"] footer,
151
+ footer[data-footer-layout="floating"] {
152
+ position: absolute;
153
+ bottom: var(--space-4);
154
+ left: 50%;
155
+ transform: translateX(-50%);
156
+ background: var(--footer-floating-bg);
157
+ border: 1px solid var(--footer-floating-border);
158
+ border-radius: var(--radius-xl);
159
+ box-shadow: var(--footer-floating-shadow);
160
+ padding: var(--space-2) var(--space-4);
161
+ width: auto;
162
+ max-width: 90%;
163
+ z-index: var(--z-fixed);
164
+ }
165
+
166
+ [data-footer-layout="floating"] .nav-controls,
167
+ footer[data-footer-layout="floating"] .nav-controls {
168
+ gap: var(--space-2);
169
+ }
170
+
171
+ /* Dark mode support - removed, semantic variables handle this automatically */
172
+
173
+ /* ============================================================================
174
+ DATA-LAYOUT VARIANTS
175
+ ============================================================================
176
+ Footer styling controlled by data-layout attribute on <html>.
177
+ These styles are used by the layout system (framework/css/layouts/).
178
+ ============================================================================ */
179
+
180
+ /* -----------------------------------------------------------------------------
181
+ Article & Focused: Floating pill in bottom-right
182
+ ----------------------------------------------------------------------------- */
183
+
184
+ [data-layout="article"] footer,
185
+ [data-layout="focused"] footer {
186
+ position: fixed;
187
+ bottom: var(--space-4);
188
+ right: var(--space-4);
189
+ left: auto;
190
+ width: auto;
191
+ background: var(--layout-floating-nav-bg);
192
+ border: var(--layout-floating-nav-border);
193
+ border-radius: var(--layout-floating-nav-radius);
194
+ box-shadow: var(--layout-floating-nav-shadow);
195
+ padding: var(--layout-floating-nav-padding);
196
+ z-index: var(--z-fixed);
197
+ }
198
+
199
+ [data-layout="article"] .nav-controls,
200
+ [data-layout="focused"] .nav-controls {
201
+ gap: var(--space-2);
202
+ }
203
+
204
+ [data-layout="article"] .nav-controls .nav-nav-buttons,
205
+ [data-layout="focused"] .nav-controls .nav-nav-buttons {
206
+ gap: var(--space-2);
207
+ }
208
+
209
+ /* Hide exit button in floating footer (too cramped) */
210
+ [data-layout="article"] .nav-exit-button,
211
+ [data-layout="focused"] .nav-exit-button {
212
+ display: none;
213
+ }
214
+
215
+ /* -----------------------------------------------------------------------------
216
+ Presentation: Invisible container, edge navigation
217
+ ----------------------------------------------------------------------------- */
218
+
219
+ [data-layout="presentation"] footer {
220
+ position: static !important;
221
+ background: transparent !important;
222
+ border: none !important;
223
+ box-shadow: none !important;
224
+ height: 0 !important;
225
+ padding: 0 !important;
226
+ margin: 0 !important;
227
+ overflow: visible !important;
228
+ }
229
+
230
+ [data-layout="presentation"] .nav-controls {
231
+ position: fixed;
232
+ top: 0;
233
+ left: 0;
234
+ right: 0;
235
+ bottom: 0;
236
+ pointer-events: none;
237
+ z-index: var(--z-fixed);
238
+ display: flex;
239
+ align-items: center;
240
+ justify-content: space-between;
241
+ padding: 0;
242
+ }
243
+
244
+ [data-layout="presentation"] .nav-controls .nav-nav-buttons {
245
+ width: 100%;
246
+ height: 100%;
247
+ display: flex;
248
+ align-items: center;
249
+ justify-content: space-between;
250
+ padding: 0 calc(var(--space-4) + env(safe-area-inset-left, 0px)) 0 calc(var(--space-4) + env(safe-area-inset-right, 0px));
251
+ pointer-events: none;
252
+ }
253
+
254
+ /* Hide exit button in presentation */
255
+ [data-layout="presentation"] .nav-exit-button {
256
+ display: none !important;
257
+ }
258
+
259
+ /* -----------------------------------------------------------------------------
260
+ Article Mobile: Unified compact footer bar
261
+ ----------------------------------------------------------------------------- */
262
+
263
+ html.bp-max-mobile-landscape[data-layout="article"] footer {
264
+ position: fixed;
265
+ bottom: 0;
266
+ left: 0;
267
+ right: 0;
268
+ width: 100%;
269
+ max-width: 100vw;
270
+ box-sizing: border-box;
271
+ border-radius: 0;
272
+ padding: var(--space-2) var(--space-3);
273
+ display: flex;
274
+ flex-direction: row;
275
+ align-items: center;
276
+ overflow: hidden;
277
+ }
278
+
279
+ html.bp-max-mobile-landscape[data-layout="article"] .nav-controls {
280
+ display: flex;
281
+ flex-direction: row;
282
+ align-items: center;
283
+ justify-content: space-between;
284
+ width: 100%;
285
+ max-width: 100%;
286
+ gap: var(--space-2);
287
+ }
288
+
289
+ html.bp-max-mobile-landscape[data-layout="article"] .nav-nav-buttons {
290
+ order: 2;
291
+ margin-left: auto;
292
+ margin-right: var(--space-1);
293
+ display: flex;
294
+ flex-direction: row;
295
+ gap: var(--space-2);
296
+ width: auto;
297
+ flex: 0 0 auto;
298
+ justify-content: flex-end;
299
+ }
300
+
301
+ html.bp-max-mobile-landscape[data-layout="article"] .nav-exit-button {
302
+ order: 3;
303
+ display: none;
304
+ }
305
+
306
+ /* -----------------------------------------------------------------------------
307
+ Traditional Mobile: Three-column grid footer
308
+ ----------------------------------------------------------------------------- */
309
+
310
+ html.bp-max-mobile-landscape[data-layout="traditional"] footer {
311
+ flex-direction: row;
312
+ align-items: center;
313
+ justify-content: center;
314
+ padding: var(--space-2) var(--space-3);
315
+ }
316
+
317
+ html.bp-max-mobile-landscape[data-layout="traditional"] .nav-controls {
318
+ display: grid;
319
+ grid-template-columns: 1fr 1fr 1fr;
320
+ grid-template-rows: 1fr;
321
+ align-items: center;
322
+ gap: var(--space-2);
323
+ width: 100%;
324
+ }
325
+
326
+ html.bp-max-mobile-landscape[data-layout="traditional"] .nav-nav-buttons {
327
+ display: contents;
328
+ }
329
+
330
+ html.bp-max-mobile-landscape[data-layout="traditional"] footer #prevBtn {
331
+ grid-column: 1;
332
+ grid-row: 1;
333
+ width: 100%;
334
+ }
335
+
336
+ /* Audio player - column 2 row 1 */
337
+ html.bp-max-mobile-landscape[data-layout="traditional"] #audio-player {
338
+ grid-column: 2;
339
+ grid-row: 1;
340
+ width: 100%;
341
+ }
342
+
343
+ html.bp-max-mobile-landscape[data-layout="traditional"] footer #nextBtn {
344
+ grid-column: 3;
345
+ grid-row: 1;
346
+ width: 100%;
347
+ }
348
+
349
+ /* ── Nav button visibility toggle ────────────────────────── */
350
+ html[data-nav-buttons="false"] #prevBtn,
351
+ html[data-nav-buttons="false"] #nextBtn {
352
+ display: none;
353
+ }
package/framework/css/components/forms.css ADDED
@@ -0,0 +1,294 @@
1
+ /* ============================================================================
2
+ FORMS - Input, textarea, select, radio, and checkbox form elements
3
+ ============================================================================
4
+
5
+ PURPOSE: Basic form element styling with accessibility enhancements
6
+
7
+ INCLUDES:
8
+ - Input and textarea base styles
9
+ - Native select dropdown styling
10
+ - Custom radio button groups with visual indicators
11
+ - Focus states and disabled states
12
+
13
+ NOTE: Custom checkboxes moved to checkbox-group.css
14
+ NOTE: Custom dropdowns available in dropdown.css
15
+
16
+ DEPENDENCIES:
17
+ - Requires: design-tokens.css (for CSS variables)
18
+
19
+ USED BY: All forms and interactive elements including multiple choice questions
20
+
21
+ USAGE:
22
+ <input type="text" placeholder="Enter text">
23
+ <textarea placeholder="Enter longer text"></textarea>
24
+ <select><option>Choice</option></select>
25
+ <div class="radio-group">
26
+ <label class="radio-option">
27
+ <input type="radio" name="choice" value="a" />
28
+ <span class="radio-custom"></span>
29
+ <div class="radio-label">Option A</div>
30
+ </label>
31
+ </div>
32
+
33
+ DEBUGGING TIPS:
34
+ - Focus ring not showing? Check outline property isn't overridden
35
+ - Input too wide? Ensure parent has width constraint
36
+ - Radio not showing selected state? Verify .radio-custom ::after pseudo-element
37
+ - For custom checkboxes, see checkbox-group.css
38
+
39
+ LAST UPDATED: 2024-11-18
40
+
41
+ ============================================================================ */
42
+
43
+ /* Form Layout & Labels */
44
+ .form-group {
45
+ margin-bottom: var(--space-5);
46
+ }
47
+
48
+ .form-label {
49
+ display: block;
50
+ font-size: var(--font-size-sm);
51
+ font-weight: var(--font-weight-semibold);
52
+ color: var(--text-secondary);
53
+ margin-bottom: var(--space-2); /* Space between label and input */
54
+ }
55
+
56
+ .form-label.required::after {
57
+ content: " *";
58
+ color: var(--color-danger);
59
+ }
60
+
61
+ .form-help {
62
+ display: block;
63
+ font-size: var(--font-size-xs);
64
+ color: var(--text-muted);
65
+ margin-top: var(--space-2);
66
+ }
67
+
68
+ .form-danger {
69
+ display: block;
70
+ font-size: var(--font-size-sm);
71
+ color: var(--color-danger);
72
+ margin-top: var(--space-2);
73
+ font-weight: var(--font-weight-medium);
74
+ }
75
+
76
+ .form-success {
77
+ display: block;
78
+ font-size: var(--font-size-sm);
79
+ color: var(--color-success);
80
+ margin-top: var(--space-2);
81
+ font-weight: var(--font-weight-medium);
82
+ }
83
+
84
+ /* Form Elements - Enhanced Accessibility */
85
+ input, textarea {
86
+ width: 100%;
87
+ padding: var(--space-3) var(--space-4);
88
+ border: var(--border-width-md) solid var(--border-strong);
89
+ border-radius: var(--radius-lg);
90
+ font-size: var(--font-size-base);
91
+ font-family: inherit;
92
+ color: var(--text-primary);
93
+ background: var(--bg-surface);
94
+ transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
95
+ box-shadow: var(--shadow-sm);
96
+ box-sizing: border-box;
97
+ }
98
+
99
+ input:focus, textarea:focus {
100
+ outline: none;
101
+ border-color: var(--color-primary);
102
+ box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
103
+ }
104
+
105
+ input:disabled, textarea:disabled {
106
+ background: var(--bg-muted);
107
+ color: var(--color-disabled-text);
108
+ border-color: var(--color-disabled-border);
109
+ cursor: default;
110
+ }
111
+
112
+ /* Textarea specific - prevent overflow */
113
+ textarea {
114
+ resize: vertical;
115
+ min-height: 80px;
116
+ max-width: 100%;
117
+ }
118
+
119
+ /* Select base styles - native HTML form element */
120
+ select {
121
+ width: 100%;
122
+ padding: var(--space-3) var(--space-4);
123
+ border: 2px solid var(--border-strong);
124
+ border-radius: var(--radius-lg);
125
+ font-size: var(--font-size-base);
126
+ font-family: inherit;
127
+ color: var(--text-primary);
128
+ background: var(--bg-surface);
129
+ cursor: pointer;
130
+ transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
131
+ box-shadow: var(--shadow-sm);
132
+ box-sizing: border-box;
133
+ min-height: 44px;
134
+ }
135
+
136
+ select:focus {
137
+ outline: none;
138
+ border-color: var(--color-primary);
139
+ box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
140
+ }
141
+
142
+ select:disabled {
143
+ background: var(--bg-muted);
144
+ color: var(--color-disabled-text);
145
+ border-color: var(--color-disabled-border);
146
+ cursor: default;
147
+ }
148
+
149
+ /* ============================================================================
150
+ RADIO BUTTONS - Custom styled radio button groups
151
+ ============================================================================ */
152
+
153
+ .radio-group {
154
+ display: flex;
155
+ flex-direction: column;
156
+ gap: var(--space-3);
157
+ }
158
+
159
+ .radio-option {
160
+ display: flex;
161
+ align-items: center;
162
+ gap: var(--space-3);
163
+ padding: var(--space-4);
164
+ border: 2px solid var(--border-strong);
165
+ border-radius: var(--radius-lg);
166
+ cursor: pointer;
167
+ transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
168
+ background: var(--bg-surface);
169
+ position: relative;
170
+ }
171
+
172
+ .radio-option:hover {
173
+ border-color: var(--color-secondary);
174
+ background: var(--bg-subtle);
175
+ }
176
+
177
+ .radio-option input[type="radio"] {
178
+ position: absolute;
179
+ opacity: 0;
180
+ width: 0;
181
+ height: 0;
182
+ }
183
+
184
+ .radio-custom {
185
+ width: 24px;
186
+ height: 24px;
187
+ border: 2px solid var(--border-strong);
188
+ border-radius: 50%;
189
+ position: relative;
190
+ flex-shrink: 0;
191
+ transition: border-color var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast);
192
+ background: var(--bg-surface);
193
+ }
194
+
195
+ .radio-custom::after {
196
+ content: '';
197
+ position: absolute;
198
+ top: 50%;
199
+ left: 50%;
200
+ transform: translate(-50%, -50%) scale(0);
201
+ width: 12px;
202
+ height: 12px;
203
+ border-radius: 50%;
204
+ background: var(--color-secondary);
205
+ transition: transform var(--transition-fast);
206
+ }
207
+
208
+ .radio-option input[type="radio"]:checked ~ .radio-custom {
209
+ border-color: var(--color-secondary);
210
+ background: var(--bg-surface);
211
+ }
212
+
213
+ .radio-option input[type="radio"]:checked ~ .radio-custom::after {
214
+ transform: translate(-50%, -50%) scale(1);
215
+ }
216
+
217
+ .radio-option input[type="radio"]:focus-visible ~ .radio-custom {
218
+ outline: 3px solid var(--focus-ring-color);
219
+ outline-offset: 2px;
220
+ }
221
+
222
+ .radio-option input[type="radio"]:disabled ~ .radio-custom {
223
+ opacity: 0.5;
224
+ cursor: default;
225
+ }
226
+
227
+ .radio-option:has(input[type="radio"]:checked) {
228
+ border-color: var(--color-secondary);
229
+ background: rgba(131, 8, 255, 0.05);
230
+ }
231
+
232
+ .radio-label {
233
+ font-size: var(--font-size-base);
234
+ color: var(--text-primary);
235
+ font-weight: var(--font-weight-medium);
236
+ flex: 1;
237
+ }
238
+
239
+ .radio-description {
240
+ font-size: var(--font-size-sm);
241
+ color: var(--text-secondary);
242
+ margin-top: var(--space-1);
243
+ }
244
+
245
+ /* Report Issue Form */
246
+ .report-issue-form .form-control {
247
+ width: 100%;
248
+ padding: var(--space-3) var(--space-4);
249
+ border: var(--border-width-md) solid var(--border-default);
250
+ border-radius: var(--radius-md);
251
+ font-size: var(--font-size-base);
252
+ font-family: inherit;
253
+ color: var(--text-primary);
254
+ background: var(--bg-surface);
255
+ resize: vertical;
256
+ min-height: 120px;
257
+ }
258
+
259
+ .report-issue-form .form-control:focus {
260
+ outline: none;
261
+ border-color: var(--color-primary);
262
+ box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
263
+ }
264
+
265
+ .report-issue-form .form-text {
266
+ display: block;
267
+ font-size: var(--font-size-xs);
268
+ color: var(--text-muted);
269
+ margin-top: var(--space-2);
270
+ }
271
+
272
+ .report-issue-status {
273
+ margin-top: var(--space-4);
274
+ padding: var(--space-3) var(--space-4);
275
+ border-radius: var(--radius-md);
276
+ font-size: var(--font-size-sm);
277
+ font-weight: var(--font-weight-medium);
278
+ }
279
+
280
+ .report-issue-status.success {
281
+ background: var(--color-success-alpha-10, rgba(34, 197, 94, 0.1));
282
+ color: var(--color-success);
283
+ border: 1px solid var(--color-success-alpha-20, rgba(34, 197, 94, 0.2));
284
+ }
285
+
286
+ .report-issue-status.error {
287
+ background: var(--color-danger-alpha-10, rgba(239, 68, 68, 0.1));
288
+ color: var(--color-danger);
289
+ border: 1px solid var(--color-danger-alpha-20, rgba(239, 68, 68, 0.2));
290
+ }
291
+
292
+ .report-issue-status[hidden] {
293
+ display: none;
294
+ }