brut 0.0.20 → 0.0.22

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 (728) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +24 -3
  3. data/.nvim.lua +1 -0
  4. data/Dockerfile.dx +12 -3
  5. data/Gemfile.lock +9 -7
  6. data/README.md +0 -7
  7. data/Rakefile +6 -4
  8. data/bin/dev +20 -0
  9. data/bin/docs +27 -0
  10. data/bin/setup +47 -1
  11. data/brut-css/.nvim.lua +1 -0
  12. data/brut-css/README.md +28 -0
  13. data/brut-css/bin/build +31 -0
  14. data/brut-css/bin/dev +1 -0
  15. data/brut-css/bin/docs +15 -0
  16. data/brut-css/bin/setup +5 -0
  17. data/brut-css/config/media-queries-all.css +15 -0
  18. data/brut-css/config/media-queries-minimal.css +5 -0
  19. data/brut-css/config/postcss.config.cjs +7 -0
  20. data/brut-css/config/pseudo-classes-all.css +9 -0
  21. data/brut-css/dx +1 -0
  22. data/brut-css/package-lock.json +3217 -0
  23. data/brut-css/package.json +36 -0
  24. data/brut-css/src/css/appearance.css +145 -0
  25. data/brut-css/src/css/border.css +522 -0
  26. data/brut-css/src/css/colors.css +3502 -0
  27. data/brut-css/src/css/dimensions.css +548 -0
  28. data/brut-css/src/css/flex.css +179 -0
  29. data/brut-css/src/css/index.css +13 -0
  30. data/brut-css/src/css/layout.css +120 -0
  31. data/brut-css/src/css/list.css +41 -0
  32. data/brut-css/src/css/positioning.css +354 -0
  33. data/brut-css/src/css/properties/colors.css +455 -0
  34. data/brut-css/src/css/properties/index.css +3 -0
  35. data/brut-css/src/css/properties/spacing.css +140 -0
  36. data/brut-css/src/css/properties/typography.css +224 -0
  37. data/brut-css/src/css/reset.css +107 -0
  38. data/brut-css/src/css/spacing.css +585 -0
  39. data/brut-css/src/css/typography.css +519 -0
  40. data/brut-css/src/css/utils.css +104 -0
  41. data/brut-css/src/docs/1_getting-started/1_overview.md +46 -0
  42. data/brut-css/src/docs/1_getting-started/2_installation.md +25 -0
  43. data/brut-css/src/docs/1_getting-started/3_core-concepts.md +75 -0
  44. data/brut-css/src/docs/1_getting-started/4_simple-example.md +132 -0
  45. data/brut-css/src/docs/1_getting-started/page.html.ejs +10 -0
  46. data/brut-css/src/docs/2_properties/page.html.ejs +71 -0
  47. data/brut-css/src/docs/3_classes/color-demo.html.ejs +31 -0
  48. data/brut-css/src/docs/3_classes/page.html.ejs +87 -0
  49. data/brut-css/src/docs/4_customization/1_design-system.md +36 -0
  50. data/brut-css/src/docs/4_customization/2_breakpoints.md +75 -0
  51. data/brut-css/src/docs/4_customization/3_pseudo-classes.md +74 -0
  52. data/brut-css/src/docs/4_customization/4_advanced-configuration.md +40 -0
  53. data/brut-css/src/docs/4_customization/page.html.ejs +10 -0
  54. data/brut-css/src/docs/docs.css +98 -0
  55. data/brut-css/src/docs/includes/body-and-header.html.ejs +30 -0
  56. data/brut-css/src/docs/includes/footer-and-rest.html.ejs +9 -0
  57. data/brut-css/src/docs/includes/head.html.ejs +5 -0
  58. data/brut-css/src/docs/includes/nav.html.ejs +10 -0
  59. data/brut-css/src/docs/index.html.ejs +32 -0
  60. data/brut-css/src/docs/prism-twilight.min.css +1 -0
  61. data/brut-css/src/js/Logger.js +71 -0
  62. data/brut-css/src/js/build.js +111 -0
  63. data/brut-css/src/js/cli/CLIArgError.js +7 -0
  64. data/brut-css/src/js/cli/Debug.js +27 -0
  65. data/brut-css/src/js/cli/DocsDir.js +16 -0
  66. data/brut-css/src/js/cli/DocsTemplateSourceDir.js +16 -0
  67. data/brut-css/src/js/cli/InputFile.js +31 -0
  68. data/brut-css/src/js/cli/MediaQueryConfigFile.js +10 -0
  69. data/brut-css/src/js/cli/OutputFile.js +22 -0
  70. data/brut-css/src/js/cli/ParsedArg.js +17 -0
  71. data/brut-css/src/js/cli/PathToBrutCSSRoot.js +19 -0
  72. data/brut-css/src/js/cli/PseudoClassConfigFile.js +11 -0
  73. data/brut-css/src/js/cli.js +108 -0
  74. data/brut-css/src/js/docGenerator.js +467 -0
  75. data/brut-css/src/js/mediaQueryConfigParser.js +98 -0
  76. data/brut-css/src/js/post-css-plugins/addMediaQueriesPlugin.js +49 -0
  77. data/brut-css/src/js/post-css-plugins/addPseudoClassesPlugin.js +42 -0
  78. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Category.js +9 -0
  79. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/DocState.js +185 -0
  80. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Documentable.js +8 -0
  81. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Group.js +7 -0
  82. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/ParsedComment.js +73 -0
  83. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Property.js +9 -0
  84. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyCategory.js +4 -0
  85. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/PropertyGroup.js +8 -0
  86. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/Rule.js +12 -0
  87. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleCategory.js +4 -0
  88. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/RuleGroup.js +8 -0
  89. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeRef.js +5 -0
  90. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin/SeeURL.js +9 -0
  91. data/brut-css/src/js/post-css-plugins/generateDocumentationPlugin.js +49 -0
  92. data/brut-css/src/js/post-css-plugins/generateRootCustomPropertiesPlugin.js +45 -0
  93. data/brut-css/src/js/pseudoClassConfigParser.js +145 -0
  94. data/brut-js/.projections.json +10 -0
  95. data/brut-js/README.md +118 -0
  96. data/brut-js/bin/build +10 -0
  97. data/brut-js/bin/ci +5 -0
  98. data/brut-js/bin/setup +5 -0
  99. data/brut-js/docs/README.md +8 -0
  100. data/brut-js/docs/jsdoc-plugins/customElementTag.js +8 -0
  101. data/brut-js/docs/jsdoc-theme/publish.js +692 -0
  102. data/brut-js/docs/jsdoc-theme/static/scripts/linenumber.js +25 -0
  103. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/Apache-License-2.0.txt +202 -0
  104. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/lang-css.js +2 -0
  105. data/brut-js/docs/jsdoc-theme/static/scripts/prettify/prettify.js +28 -0
  106. data/brut-js/docs/jsdoc-theme/static/styles/jsdoc-default.css +327 -0
  107. data/brut-js/docs/jsdoc-theme/static/styles/prettify-jsdoc.css +111 -0
  108. data/brut-js/docs/jsdoc-theme/static/styles/prettify-tomorrow.css +132 -0
  109. data/brut-js/docs/jsdoc-theme/tmpl/augments.tmpl +10 -0
  110. data/brut-js/docs/jsdoc-theme/tmpl/container.tmpl +199 -0
  111. data/brut-js/docs/jsdoc-theme/tmpl/details.tmpl +143 -0
  112. data/brut-js/docs/jsdoc-theme/tmpl/example.tmpl +2 -0
  113. data/brut-js/docs/jsdoc-theme/tmpl/examples.tmpl +13 -0
  114. data/brut-js/docs/jsdoc-theme/tmpl/exceptions.tmpl +32 -0
  115. data/brut-js/docs/jsdoc-theme/tmpl/layout.tmpl +38 -0
  116. data/brut-js/docs/jsdoc-theme/tmpl/mainpage.tmpl +14 -0
  117. data/brut-js/docs/jsdoc-theme/tmpl/members.tmpl +38 -0
  118. data/brut-js/docs/jsdoc-theme/tmpl/method.tmpl +131 -0
  119. data/brut-js/docs/jsdoc-theme/tmpl/modifies.tmpl +14 -0
  120. data/brut-js/docs/jsdoc-theme/tmpl/params.tmpl +131 -0
  121. data/brut-js/docs/jsdoc-theme/tmpl/properties.tmpl +108 -0
  122. data/brut-js/docs/jsdoc-theme/tmpl/returns.tmpl +19 -0
  123. data/brut-js/docs/jsdoc-theme/tmpl/source.tmpl +8 -0
  124. data/brut-js/docs/jsdoc-theme/tmpl/tutorial.tmpl +19 -0
  125. data/brut-js/docs/jsdoc-theme/tmpl/type.tmpl +7 -0
  126. data/brut-js/docs/jsdoc.config.json +23 -0
  127. data/brut-js/docs/package-lock.json +343 -0
  128. data/brut-js/docs/package.json +7 -0
  129. data/brut-js/package-lock.json +2171 -0
  130. data/brut-js/package.json +32 -0
  131. data/brut-js/specs/AjaxSubmit.spec.js +256 -0
  132. data/brut-js/specs/Autosubmit.spec.js +127 -0
  133. data/brut-js/specs/ConfirmSubmit.spec.js +193 -0
  134. data/brut-js/specs/ConstraintViolationMessage.spec.js +33 -0
  135. data/brut-js/specs/ConstraintViolationMessages.spec.js +29 -0
  136. data/brut-js/specs/CopyToClipboard.spec.js +35 -0
  137. data/brut-js/specs/Form.spec.js +181 -0
  138. data/brut-js/specs/I18nTranslation.spec.js +19 -0
  139. data/brut-js/specs/LocaleDetection.spec.js +22 -0
  140. data/brut-js/specs/Message.spec.js +15 -0
  141. data/brut-js/specs/SpecHelper.js +23 -0
  142. data/brut-js/specs/Tabs.spec.js +41 -0
  143. data/brut-js/specs/config/asset_metadata.json +7 -0
  144. data/brut-js/src/AjaxSubmit.js +384 -0
  145. data/brut-js/src/Autosubmit.js +63 -0
  146. data/brut-js/src/BaseCustomElement.js +261 -0
  147. data/brut-js/src/ConfirmSubmit.js +116 -0
  148. data/brut-js/src/ConfirmationDialog.js +143 -0
  149. data/brut-js/src/ConstraintViolationMessage.js +125 -0
  150. data/brut-js/src/ConstraintViolationMessages.js +98 -0
  151. data/brut-js/src/CopyToClipboard.js +96 -0
  152. data/brut-js/src/Form.js +151 -0
  153. data/brut-js/src/I18nTranslation.js +61 -0
  154. data/brut-js/src/LocaleDetection.js +117 -0
  155. data/brut-js/src/Logger.js +90 -0
  156. data/brut-js/src/Message.js +56 -0
  157. data/brut-js/src/RichString.js +113 -0
  158. data/brut-js/src/Tabs.js +168 -0
  159. data/brut-js/src/Tracing.js +247 -0
  160. data/brut-js/src/appForTestingOnly.js +15 -0
  161. data/brut-js/src/index.js +130 -0
  162. data/brut-js/src/testing/AssetMetadata.js +35 -0
  163. data/brut-js/src/testing/AssetMetadataLoader.js +25 -0
  164. data/brut-js/src/testing/CustomElementTest.js +235 -0
  165. data/brut-js/src/testing/DOMCreator.js +45 -0
  166. data/brut-js/src/testing/index.js +48 -0
  167. data/brutrb.com/.vitepress/config.mjs +106 -0
  168. data/brutrb.com/.vitepress/plugins/jsdocLinker.js +34 -0
  169. data/brutrb.com/.vitepress/plugins/rdocLinker.js +18 -0
  170. data/brutrb.com/.vitepress/theme/custom.css +7 -0
  171. data/brutrb.com/.vitepress/theme/index.js +18 -0
  172. data/brutrb.com/.vitepress/theme/style.css +149 -0
  173. data/brutrb.com/ai.md +68 -0
  174. data/brutrb.com/assets.md +138 -0
  175. data/brutrb.com/bin/build +5 -0
  176. data/brutrb.com/bin/deploy +7 -0
  177. data/brutrb.com/bin/dev +5 -0
  178. data/brutrb.com/bin/setup +5 -0
  179. data/brutrb.com/brut-js.md +117 -0
  180. data/brutrb.com/business-logic.md +55 -0
  181. data/brutrb.com/cli.md +278 -0
  182. data/brutrb.com/components.md +243 -0
  183. data/brutrb.com/configuration.md +257 -0
  184. data/brutrb.com/css.md +103 -0
  185. data/brutrb.com/custom-element-tests.md +149 -0
  186. data/brutrb.com/database-access.md +201 -0
  187. data/brutrb.com/database-schema.md +312 -0
  188. data/brutrb.com/deployment.md +66 -0
  189. data/brutrb.com/dev-environment.md +179 -0
  190. data/brutrb.com/doc-conventions.md +39 -0
  191. data/brutrb.com/end-to-end-tests.md +174 -0
  192. data/brutrb.com/flash-and-session.md +224 -0
  193. data/brutrb.com/forms.md +866 -0
  194. data/brutrb.com/getting-started.md +66 -0
  195. data/brutrb.com/handlers.md +153 -0
  196. data/brutrb.com/hooks.md +178 -0
  197. data/brutrb.com/i18n.md +188 -0
  198. data/brutrb.com/images/Makefile +10 -0
  199. data/brutrb.com/images/dev-env-overview.dot +54 -0
  200. data/brutrb.com/images/dev-env-overview.png +0 -0
  201. data/brutrb.com/images/dev-env-protocol.dot +37 -0
  202. data/brutrb.com/images/dev-env-protocol.png +0 -0
  203. data/brutrb.com/images/logo-300.png +0 -0
  204. data/brutrb.com/images/logo.png +0 -0
  205. data/brutrb.com/images/overview.graffle +0 -0
  206. data/brutrb.com/images/overview.png +0 -0
  207. data/brutrb.com/images/spa.dot +19 -0
  208. data/brutrb.com/images/spa.png +0 -0
  209. data/brutrb.com/images/workspace-protocol.dot +44 -0
  210. data/brutrb.com/images/workspace-protocol.png +0 -0
  211. data/brutrb.com/index.md +36 -0
  212. data/brutrb.com/instrumentation.md +183 -0
  213. data/brutrb.com/javascript.md +122 -0
  214. data/brutrb.com/jobs.md +14 -0
  215. data/{doc-src → brutrb.com}/keyword-injection.md +122 -68
  216. data/brutrb.com/markdown-examples.md +85 -0
  217. data/brutrb.com/middleware.md +80 -0
  218. data/brutrb.com/not-released.md +5 -0
  219. data/brutrb.com/overview.md +404 -0
  220. data/brutrb.com/package-lock.json +2404 -0
  221. data/brutrb.com/package.json +11 -0
  222. data/brutrb.com/pages.md +378 -0
  223. data/brutrb.com/public/images/logo-300.png +0 -0
  224. data/brutrb.com/public/images/logo.png +0 -0
  225. data/brutrb.com/routes.md +215 -0
  226. data/brutrb.com/security.md +105 -0
  227. data/brutrb.com/seed-data.md +63 -0
  228. data/brutrb.com/space-time-continuum.md +85 -0
  229. data/brutrb.com/tutorial.md +3 -0
  230. data/brutrb.com/unit-tests.md +148 -0
  231. data/docker-compose.dx.yml +6 -3
  232. data/docs/404.html +21 -0
  233. data/docs/CNAME +1 -0
  234. data/docs/ai.html +24 -0
  235. data/docs/api/Brut/BackEnd/SeedData.html +493 -0
  236. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server/FlushSpans.html +214 -0
  237. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares/Server.html +125 -0
  238. data/docs/api/Brut/BackEnd/Sidekiq/Middlewares.html +125 -0
  239. data/docs/api/Brut/BackEnd/Sidekiq.html +125 -0
  240. data/docs/api/Brut/BackEnd/Validators/FormValidator.html +414 -0
  241. data/docs/api/Brut/BackEnd/Validators.html +128 -0
  242. data/docs/api/Brut/BackEnd.html +132 -0
  243. data/docs/api/Brut/CLI/App.html +1576 -0
  244. data/docs/api/Brut/CLI/AppRunner.html +491 -0
  245. data/docs/api/Brut/CLI/Apps/BuildAssets/All.html +264 -0
  246. data/docs/api/Brut/CLI/Apps/BuildAssets/CSS.html +306 -0
  247. data/docs/api/Brut/CLI/Apps/BuildAssets/Images.html +262 -0
  248. data/docs/api/Brut/CLI/Apps/BuildAssets/JS.html +314 -0
  249. data/docs/api/Brut/CLI/Apps/BuildAssets.html +183 -0
  250. data/docs/api/Brut/CLI/Apps/DB/Create.html +365 -0
  251. data/docs/api/Brut/CLI/Apps/DB/Drop.html +357 -0
  252. data/docs/api/Brut/CLI/Apps/DB/Migrate.html +383 -0
  253. data/docs/api/Brut/CLI/Apps/DB/NewMigration.html +335 -0
  254. data/docs/api/Brut/CLI/Apps/DB/Rebuild.html +329 -0
  255. data/docs/api/Brut/CLI/Apps/DB/Seed.html +347 -0
  256. data/docs/api/Brut/CLI/Apps/DB/Status.html +383 -0
  257. data/docs/api/Brut/CLI/Apps/DB.html +183 -0
  258. data/docs/api/Brut/CLI/Apps/Scaffold/Action/Route.html +303 -0
  259. data/docs/api/Brut/CLI/Apps/Scaffold/Action.html +512 -0
  260. data/docs/api/Brut/CLI/Apps/Scaffold/Component.html +398 -0
  261. data/docs/api/Brut/CLI/Apps/Scaffold/CustomElementTest.html +374 -0
  262. data/docs/api/Brut/CLI/Apps/Scaffold/E2ETest.html +410 -0
  263. data/docs/api/Brut/CLI/Apps/Scaffold/Form.html +262 -0
  264. data/docs/api/Brut/CLI/Apps/Scaffold/Page/Route.html +303 -0
  265. data/docs/api/Brut/CLI/Apps/Scaffold/Page.html +480 -0
  266. data/docs/api/Brut/CLI/Apps/Scaffold/RoutesEditor.html +450 -0
  267. data/docs/api/Brut/CLI/Apps/Scaffold/Test.html +380 -0
  268. data/docs/api/Brut/CLI/Apps/Scaffold.html +253 -0
  269. data/docs/api/Brut/CLI/Apps/Test/Audit.html +464 -0
  270. data/docs/api/Brut/CLI/Apps/Test/E2e.html +407 -0
  271. data/docs/api/Brut/CLI/Apps/Test/JS.html +262 -0
  272. data/docs/api/Brut/CLI/Apps/Test/Run.html +578 -0
  273. data/docs/api/Brut/CLI/Apps/Test.html +253 -0
  274. data/docs/api/Brut/CLI/Apps.html +125 -0
  275. data/docs/api/Brut/CLI/Command.html +2342 -0
  276. data/docs/api/Brut/CLI/Error.html +139 -0
  277. data/docs/api/Brut/CLI/ExecutionResults/Result.html +664 -0
  278. data/docs/api/Brut/CLI/ExecutionResults.html +675 -0
  279. data/docs/api/Brut/CLI/Executor.html +430 -0
  280. data/docs/api/Brut/CLI/InvalidOption.html +245 -0
  281. data/docs/api/Brut/CLI/Options.html +753 -0
  282. data/docs/api/Brut/CLI/Output.html +699 -0
  283. data/docs/api/Brut/CLI/SystemExecError.html +451 -0
  284. data/docs/api/Brut/CLI.html +263 -0
  285. data/docs/api/Brut/FactoryBot.html +225 -0
  286. data/docs/api/Brut/Framework/App.html +1097 -0
  287. data/docs/api/Brut/Framework/Config.html +1045 -0
  288. data/docs/api/Brut/Framework/Container.html +1379 -0
  289. data/docs/api/Brut/Framework/Error.html +140 -0
  290. data/docs/api/Brut/Framework/Errors/AbstractMethod.html +144 -0
  291. data/docs/api/Brut/Framework/Errors/Bug.html +234 -0
  292. data/docs/api/Brut/Framework/Errors/MissingConfiguration.html +257 -0
  293. data/docs/api/Brut/Framework/Errors/MissingParameter.html +273 -0
  294. data/docs/api/Brut/Framework/Errors/NoClassForPath.html +471 -0
  295. data/docs/api/Brut/Framework/Errors/NotFound.html +308 -0
  296. data/docs/api/Brut/Framework/Errors/NotImplemented.html +234 -0
  297. data/docs/api/Brut/Framework/Errors.html +328 -0
  298. data/docs/api/Brut/Framework/FussyTypeEnforcement.html +392 -0
  299. data/docs/api/Brut/Framework/MCP.html +861 -0
  300. data/docs/api/Brut/Framework/ProjectEnvironment.html +648 -0
  301. data/docs/api/Brut/Framework.html +129 -0
  302. data/docs/api/Brut/FrontEnd/AssetPathResolver.html +317 -0
  303. data/docs/api/Brut/FrontEnd/Component/Helpers.html +326 -0
  304. data/docs/api/Brut/FrontEnd/Component.html +365 -0
  305. data/docs/api/Brut/FrontEnd/Components/ConstraintViolations.html +470 -0
  306. data/docs/api/Brut/FrontEnd/Components/FormTag.html +518 -0
  307. data/docs/api/Brut/FrontEnd/Components/I18nTranslations.html +317 -0
  308. data/docs/api/Brut/FrontEnd/Components/Input.html +195 -0
  309. data/docs/api/Brut/FrontEnd/Components/Inputs/CsrfToken.html +339 -0
  310. data/docs/api/Brut/FrontEnd/Components/Inputs/InputTag.html +660 -0
  311. data/docs/api/Brut/FrontEnd/Components/Inputs/RadioButton.html +417 -0
  312. data/docs/api/Brut/FrontEnd/Components/Inputs/SelectTagWithOptions.html +918 -0
  313. data/docs/api/Brut/FrontEnd/Components/Inputs/TextareaTag.html +651 -0
  314. data/docs/api/Brut/FrontEnd/Components/Inputs.html +125 -0
  315. data/docs/api/Brut/FrontEnd/Components/LocaleDetection.html +367 -0
  316. data/docs/api/Brut/FrontEnd/Components/PageIdentifier.html +336 -0
  317. data/docs/api/Brut/FrontEnd/Components/TimeTag.html +655 -0
  318. data/docs/api/Brut/FrontEnd/Components/Traceparent.html +352 -0
  319. data/docs/api/Brut/FrontEnd/Components.html +135 -0
  320. data/docs/api/Brut/FrontEnd/Download.html +467 -0
  321. data/docs/api/Brut/FrontEnd/Flash.html +1150 -0
  322. data/docs/api/Brut/FrontEnd/Form.html +1157 -0
  323. data/docs/api/Brut/FrontEnd/Forms/ConstraintViolation.html +634 -0
  324. data/docs/api/Brut/FrontEnd/Forms/Input.html +615 -0
  325. data/docs/api/Brut/FrontEnd/Forms/InputDeclarations.html +547 -0
  326. data/docs/api/Brut/FrontEnd/Forms/InputDefinition.html +1318 -0
  327. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInput.html +609 -0
  328. data/docs/api/Brut/FrontEnd/Forms/RadioButtonGroupInputDefinition.html +587 -0
  329. data/docs/api/Brut/FrontEnd/Forms/SelectInput.html +613 -0
  330. data/docs/api/Brut/FrontEnd/Forms/SelectInputDefinition.html +582 -0
  331. data/docs/api/Brut/FrontEnd/Forms/ValidityState.html +609 -0
  332. data/docs/api/Brut/FrontEnd/Forms.html +127 -0
  333. data/docs/api/Brut/FrontEnd/GenericResponse.html +377 -0
  334. data/docs/api/Brut/FrontEnd/Handler.html +442 -0
  335. data/docs/api/Brut/FrontEnd/Handlers/CspReportingHandler.html +318 -0
  336. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler/TraceParent.html +336 -0
  337. data/docs/api/Brut/FrontEnd/Handlers/InstrumentationHandler.html +399 -0
  338. data/docs/api/Brut/FrontEnd/Handlers/LocaleDetectionHandler.html +354 -0
  339. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler/Form.html +151 -0
  340. data/docs/api/Brut/FrontEnd/Handlers/MissingHandler.html +315 -0
  341. data/docs/api/Brut/FrontEnd/Handlers.html +125 -0
  342. data/docs/api/Brut/FrontEnd/HandlingResults.html +339 -0
  343. data/docs/api/Brut/FrontEnd/HttpMethod.html +661 -0
  344. data/docs/api/Brut/FrontEnd/HttpStatus.html +496 -0
  345. data/docs/api/Brut/FrontEnd/InlineSvgLocator.html +284 -0
  346. data/docs/api/Brut/FrontEnd/Layout.html +318 -0
  347. data/docs/api/Brut/FrontEnd/Middleware.html +135 -0
  348. data/docs/api/Brut/FrontEnd/Middlewares/AnnotateBrutOwnedPaths.html +288 -0
  349. data/docs/api/Brut/FrontEnd/Middlewares/Favicon.html +292 -0
  350. data/docs/api/Brut/FrontEnd/Middlewares/OpenTelemetrySpan.html +324 -0
  351. data/docs/api/Brut/FrontEnd/Middlewares/ReloadApp.html +372 -0
  352. data/docs/api/Brut/FrontEnd/Middlewares.html +125 -0
  353. data/docs/api/Brut/FrontEnd/Page.html +773 -0
  354. data/docs/api/Brut/FrontEnd/Pages/MissingPage.html +797 -0
  355. data/docs/api/Brut/FrontEnd/Pages.html +125 -0
  356. data/docs/api/Brut/FrontEnd/RequestContext.html +1312 -0
  357. data/docs/api/Brut/FrontEnd/RouteHook.html +424 -0
  358. data/docs/api/Brut/FrontEnd/RouteHooks/AgeFlash.html +242 -0
  359. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineScripts.html +249 -0
  360. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts/ReportOnly.html +264 -0
  361. data/docs/api/Brut/FrontEnd/RouteHooks/CSPNoInlineStylesOrScripts.html +261 -0
  362. data/docs/api/Brut/FrontEnd/RouteHooks/LocaleDetection.html +284 -0
  363. data/docs/api/Brut/FrontEnd/RouteHooks/SetupRequestContext.html +252 -0
  364. data/docs/api/Brut/FrontEnd/RouteHooks.html +115 -0
  365. data/docs/api/Brut/FrontEnd/Routing/FormHandlerRoute.html +227 -0
  366. data/docs/api/Brut/FrontEnd/Routing/FormRoute.html +305 -0
  367. data/docs/api/Brut/FrontEnd/Routing/MissingForm.html +324 -0
  368. data/docs/api/Brut/FrontEnd/Routing/MissingHandler.html +319 -0
  369. data/docs/api/Brut/FrontEnd/Routing/MissingPage.html +315 -0
  370. data/docs/api/Brut/FrontEnd/Routing/MissingPath.html +315 -0
  371. data/docs/api/Brut/FrontEnd/Routing/PageRoute.html +327 -0
  372. data/docs/api/Brut/FrontEnd/Routing/Route.html +761 -0
  373. data/docs/api/Brut/FrontEnd/Routing.html +927 -0
  374. data/docs/api/Brut/FrontEnd/Session.html +1195 -0
  375. data/docs/api/Brut/FrontEnd.html +134 -0
  376. data/docs/api/Brut/I18n/BaseMethods.html +931 -0
  377. data/docs/api/Brut/I18n/ForBackEnd.html +302 -0
  378. data/docs/api/Brut/I18n/ForCLI.html +302 -0
  379. data/docs/api/Brut/I18n/ForHTML.html +296 -0
  380. data/docs/api/Brut/I18n/HTTPAcceptLanguage/AlwaysEnglish.html +316 -0
  381. data/docs/api/Brut/I18n/HTTPAcceptLanguage.html +930 -0
  382. data/docs/api/Brut/I18n.html +127 -0
  383. data/docs/api/Brut/Instrumentation/LoggerSpanExporter.html +435 -0
  384. data/docs/api/Brut/Instrumentation/OpenTelemetry/NormalizedAttributes.html +286 -0
  385. data/docs/api/Brut/Instrumentation/OpenTelemetry/Span.html +302 -0
  386. data/docs/api/Brut/Instrumentation/OpenTelemetry.html +864 -0
  387. data/docs/api/Brut/Instrumentation.html +126 -0
  388. data/docs/api/Brut/SinatraHelpers/ClassMethods.html +532 -0
  389. data/docs/api/Brut/SinatraHelpers.html +281 -0
  390. data/docs/api/Brut/SpecSupport/ClockSupport.html +383 -0
  391. data/docs/api/Brut/SpecSupport/ComponentSupport.html +502 -0
  392. data/docs/api/Brut/SpecSupport/E2ETestServer.html +503 -0
  393. data/docs/api/Brut/SpecSupport/E2eSupport.html +142 -0
  394. data/docs/api/Brut/SpecSupport/EnhancedNode.html +403 -0
  395. data/docs/api/Brut/SpecSupport/FlashSupport.html +278 -0
  396. data/docs/api/Brut/SpecSupport/GeneralSupport/ClassMethods.html +401 -0
  397. data/docs/api/Brut/SpecSupport/GeneralSupport.html +195 -0
  398. data/docs/api/Brut/SpecSupport/HandlerSupport.html +160 -0
  399. data/docs/api/Brut/SpecSupport/Matchers/HaveConstraintViolation.html +553 -0
  400. data/docs/api/Brut/SpecSupport/Matchers/HaveHTMLAttribute.html +439 -0
  401. data/docs/api/Brut/SpecSupport/Matchers.html +125 -0
  402. data/docs/api/Brut/SpecSupport/RSpecSetup/OptionalSidekiqSupport.html +335 -0
  403. data/docs/api/Brut/SpecSupport/RSpecSetup.html +602 -0
  404. data/docs/api/Brut/SpecSupport/SessionSupport.html +196 -0
  405. data/docs/api/Brut/SpecSupport.html +129 -0
  406. data/docs/api/Brut.html +225 -0
  407. data/docs/api/Clock.html +603 -0
  408. data/docs/api/RichString.html +968 -0
  409. data/docs/api/SemanticLogger/Appender/Async.html +219 -0
  410. data/docs/api/Sequel/Extensions/BrutInstrumentation.html +115 -0
  411. data/docs/api/Sequel/Extensions/BrutMigrations.html +533 -0
  412. data/docs/api/Sequel/Extensions.html +117 -0
  413. data/docs/api/Sequel/Plugins/CreatedAt/InstanceMethods.html +105 -0
  414. data/docs/api/Sequel/Plugins/CreatedAt.html +125 -0
  415. data/docs/api/Sequel/Plugins/ExternalId/ClassMethods.html +207 -0
  416. data/docs/api/Sequel/Plugins/ExternalId/InstanceMethods.html +186 -0
  417. data/docs/api/Sequel/Plugins/ExternalId.html +218 -0
  418. data/docs/api/Sequel/Plugins/FindBang/ClassMethods.html +202 -0
  419. data/docs/api/Sequel/Plugins/FindBang.html +125 -0
  420. data/docs/api/Sequel/Plugins.html +117 -0
  421. data/docs/api/Sequel.html +117 -0
  422. data/docs/api/_index.html +1553 -0
  423. data/docs/api/class_list.html +54 -0
  424. data/docs/api/css/common.css +1 -0
  425. data/docs/api/css/full_list.css +58 -0
  426. data/docs/api/css/style.css +503 -0
  427. data/docs/api/file.README.html +127 -0
  428. data/docs/api/file_list.html +59 -0
  429. data/docs/api/frames.html +22 -0
  430. data/docs/api/index.html +127 -0
  431. data/docs/api/js/app.js +344 -0
  432. data/docs/api/js/full_list.js +242 -0
  433. data/docs/api/js/jquery.js +4 -0
  434. data/docs/api/method_list.html +3998 -0
  435. data/docs/api/top-level-namespace.html +112 -0
  436. data/docs/assets/ai.md.tZrjP9im.js +1 -0
  437. data/docs/assets/ai.md.tZrjP9im.lean.js +1 -0
  438. data/docs/assets/app.D_yaTITQ.js +1 -0
  439. data/docs/assets/assets.md.D3wunzLx.js +19 -0
  440. data/docs/assets/assets.md.D3wunzLx.lean.js +1 -0
  441. data/docs/assets/brut-js.md.o2DAO2s2.js +12 -0
  442. data/docs/assets/brut-js.md.o2DAO2s2.lean.js +1 -0
  443. data/docs/assets/business-logic.md.BY4hGy0m.js +1 -0
  444. data/docs/assets/business-logic.md.BY4hGy0m.lean.js +1 -0
  445. data/docs/assets/chunks/@localSearchIndexroot.BsN5i0Fi.js +1 -0
  446. data/docs/assets/chunks/VPLocalSearchBox.B2-ZzyTY.js +8 -0
  447. data/docs/assets/chunks/framework.1L-BeKqY.js +18 -0
  448. data/docs/assets/chunks/theme.CfGFVRvE.js +2 -0
  449. data/docs/assets/cli.md.RmeA2b0i.js +127 -0
  450. data/docs/assets/cli.md.RmeA2b0i.lean.js +1 -0
  451. data/docs/assets/components.md.eCttGlN-.js +104 -0
  452. data/docs/assets/components.md.eCttGlN-.lean.js +1 -0
  453. data/docs/assets/configuration.md.BRriU0cL.js +78 -0
  454. data/docs/assets/configuration.md.BRriU0cL.lean.js +1 -0
  455. data/docs/assets/css.md.DJgj2clw.js +21 -0
  456. data/docs/assets/css.md.DJgj2clw.lean.js +1 -0
  457. data/docs/assets/custom-element-tests.md.BrYJQEl3.js +69 -0
  458. data/docs/assets/custom-element-tests.md.BrYJQEl3.lean.js +1 -0
  459. data/docs/assets/database-access.md.C7l-Vuvb.js +63 -0
  460. data/docs/assets/database-access.md.C7l-Vuvb.lean.js +1 -0
  461. data/docs/assets/database-schema.md.BUjR0VS1.js +63 -0
  462. data/docs/assets/database-schema.md.BUjR0VS1.lean.js +1 -0
  463. data/docs/assets/deployment.md.Dbka4OTr.js +1 -0
  464. data/docs/assets/deployment.md.Dbka4OTr.lean.js +1 -0
  465. data/docs/assets/dev-env-overview.Gj7NWM8-.png +0 -0
  466. data/docs/assets/dev-env-protocol.DysDAtnz.png +0 -0
  467. data/docs/assets/dev-environment.md.BNc8AYiK.js +11 -0
  468. data/docs/assets/dev-environment.md.BNc8AYiK.lean.js +1 -0
  469. data/docs/assets/doc-conventions.md.DCfRXXi-.js +1 -0
  470. data/docs/assets/doc-conventions.md.DCfRXXi-.lean.js +1 -0
  471. data/docs/assets/end-to-end-tests.md.yfQHC0b5.js +26 -0
  472. data/docs/assets/end-to-end-tests.md.yfQHC0b5.lean.js +1 -0
  473. data/docs/assets/flash-and-session.md.BXY8RvT0.js +93 -0
  474. data/docs/assets/flash-and-session.md.BXY8RvT0.lean.js +1 -0
  475. data/docs/assets/forms.md.CBTYQ_Cz.js +379 -0
  476. data/docs/assets/forms.md.CBTYQ_Cz.lean.js +1 -0
  477. data/docs/assets/getting-started.md.Bz2s1Vjb.js +2 -0
  478. data/docs/assets/getting-started.md.Bz2s1Vjb.lean.js +1 -0
  479. data/docs/assets/handlers.md.089DVD3v.js +69 -0
  480. data/docs/assets/handlers.md.089DVD3v.lean.js +1 -0
  481. data/docs/assets/hooks.md.C4-moMny.js +80 -0
  482. data/docs/assets/hooks.md.C4-moMny.lean.js +1 -0
  483. data/docs/assets/i18n.md.Do9i1qWl.js +23 -0
  484. data/docs/assets/i18n.md.Do9i1qWl.lean.js +1 -0
  485. data/docs/assets/index.md.B28EwVpq.js +1 -0
  486. data/docs/assets/index.md.B28EwVpq.lean.js +1 -0
  487. data/docs/assets/instrumentation.md.CL6ax7nT.js +35 -0
  488. data/docs/assets/instrumentation.md.CL6ax7nT.lean.js +1 -0
  489. data/docs/assets/javascript.md.GWbhRS51.js +31 -0
  490. data/docs/assets/javascript.md.GWbhRS51.lean.js +1 -0
  491. data/docs/assets/jobs.md.S-2amAYp.js +1 -0
  492. data/docs/assets/jobs.md.S-2amAYp.lean.js +1 -0
  493. data/docs/assets/keyword-injection.md.Dt2tKREs.js +25 -0
  494. data/docs/assets/keyword-injection.md.Dt2tKREs.lean.js +1 -0
  495. data/docs/assets/markdown-examples.md.CCFEQO44.js +33 -0
  496. data/docs/assets/markdown-examples.md.CCFEQO44.lean.js +1 -0
  497. data/docs/assets/middleware.md.Czz_UlJN.js +20 -0
  498. data/docs/assets/middleware.md.Czz_UlJN.lean.js +1 -0
  499. data/docs/assets/not-released.md.BBy28McC.js +1 -0
  500. data/docs/assets/not-released.md.BBy28McC.lean.js +1 -0
  501. data/docs/assets/overview.Da81cB9R.png +0 -0
  502. data/docs/assets/overview.md.CDalkuxV.js +133 -0
  503. data/docs/assets/overview.md.CDalkuxV.lean.js +1 -0
  504. data/docs/assets/pages.md.BE3kfOc5.js +122 -0
  505. data/docs/assets/pages.md.BE3kfOc5.lean.js +1 -0
  506. data/docs/assets/routes.md.BMM7peut.js +29 -0
  507. data/docs/assets/routes.md.BMM7peut.lean.js +1 -0
  508. data/docs/assets/security.md.C668yXCi.js +1 -0
  509. data/docs/assets/security.md.C668yXCi.lean.js +1 -0
  510. data/docs/assets/seed-data.md.BvFZlqIk.js +14 -0
  511. data/docs/assets/seed-data.md.BvFZlqIk.lean.js +1 -0
  512. data/docs/assets/spa.qejUdp-5.png +0 -0
  513. data/docs/assets/space-time-continuum.md.KPUIKysQ.js +1 -0
  514. data/docs/assets/space-time-continuum.md.KPUIKysQ.lean.js +1 -0
  515. data/docs/assets/style.D73IYGCX.css +1 -0
  516. data/docs/assets/tutorial.md.BnoGjrdK.js +1 -0
  517. data/docs/assets/tutorial.md.BnoGjrdK.lean.js +1 -0
  518. data/docs/assets/unit-tests.md.DUGrnLj5.js +13 -0
  519. data/docs/assets/unit-tests.md.DUGrnLj5.lean.js +1 -0
  520. data/docs/assets/workspace-protocol.C0gXsoDb.png +0 -0
  521. data/docs/assets.html +42 -0
  522. data/docs/brut-css/brut.css +1 -0
  523. data/docs/brut-css/brut.max.css +22372 -0
  524. data/docs/brut-css/classes/appearances.html +783 -0
  525. data/docs/brut-css/classes/background-colors.html +3529 -0
  526. data/docs/brut-css/classes/border-colors.html +3529 -0
  527. data/docs/brut-css/classes/borders.html +2293 -0
  528. data/docs/brut-css/classes/dimensions.html +2581 -0
  529. data/docs/brut-css/classes/flex.html +917 -0
  530. data/docs/brut-css/classes/foreground-colors.html +3261 -0
  531. data/docs/brut-css/classes/junk-drawer.html +431 -0
  532. data/docs/brut-css/classes/layout.html +668 -0
  533. data/docs/brut-css/classes/lists.html +331 -0
  534. data/docs/brut-css/classes/positioning.html +1751 -0
  535. data/docs/brut-css/classes/spacings.html +2633 -0
  536. data/docs/brut-css/classes/typography.html +2206 -0
  537. data/docs/brut-css/customization/advanced-configuration.html +204 -0
  538. data/docs/brut-css/customization/breakpoints.html +227 -0
  539. data/docs/brut-css/customization/design-system.html +197 -0
  540. data/docs/brut-css/customization/pseudo-classes.html +228 -0
  541. data/docs/brut-css/docs.css +98 -0
  542. data/docs/brut-css/getting-started/core-concepts.html +234 -0
  543. data/docs/brut-css/getting-started/installation.html +190 -0
  544. data/docs/brut-css/getting-started/overview.html +210 -0
  545. data/docs/brut-css/getting-started/simple-example.html +285 -0
  546. data/docs/brut-css/index.html +193 -0
  547. data/docs/brut-css/prism-twilight.min.css +1 -0
  548. data/docs/brut-css/properties/colors.html +1548 -0
  549. data/docs/brut-css/properties/spacings.html +614 -0
  550. data/docs/brut-css/properties/typography.html +777 -0
  551. data/docs/brut-js/api/AjaxSubmit.html +374 -0
  552. data/docs/brut-js/api/AjaxSubmit.js.html +435 -0
  553. data/docs/brut-js/api/Autosubmit.html +192 -0
  554. data/docs/brut-js/api/Autosubmit.js.html +114 -0
  555. data/docs/brut-js/api/BaseCustomElement.html +1091 -0
  556. data/docs/brut-js/api/BaseCustomElement.js.html +312 -0
  557. data/docs/brut-js/api/BrutCustomElements.html +172 -0
  558. data/docs/brut-js/api/BufferedLogger.html +173 -0
  559. data/docs/brut-js/api/ConfirmSubmit.html +278 -0
  560. data/docs/brut-js/api/ConfirmSubmit.js.html +167 -0
  561. data/docs/brut-js/api/ConfirmationDialog.html +425 -0
  562. data/docs/brut-js/api/ConfirmationDialog.js.html +194 -0
  563. data/docs/brut-js/api/ConstraintViolationMessage.html +448 -0
  564. data/docs/brut-js/api/ConstraintViolationMessage.js.html +176 -0
  565. data/docs/brut-js/api/ConstraintViolationMessages.html +590 -0
  566. data/docs/brut-js/api/ConstraintViolationMessages.js.html +149 -0
  567. data/docs/brut-js/api/CopyToClipboard.html +345 -0
  568. data/docs/brut-js/api/CopyToClipboard.js.html +147 -0
  569. data/docs/brut-js/api/Form.html +294 -0
  570. data/docs/brut-js/api/Form.js.html +202 -0
  571. data/docs/brut-js/api/I18nTranslation.html +409 -0
  572. data/docs/brut-js/api/I18nTranslation.js.html +112 -0
  573. data/docs/brut-js/api/LocaleDetection.html +312 -0
  574. data/docs/brut-js/api/LocaleDetection.js.html +168 -0
  575. data/docs/brut-js/api/Logger.html +702 -0
  576. data/docs/brut-js/api/Logger.js.html +141 -0
  577. data/docs/brut-js/api/Message.html +238 -0
  578. data/docs/brut-js/api/Message.js.html +107 -0
  579. data/docs/brut-js/api/PrefixedLogger.html +369 -0
  580. data/docs/brut-js/api/RichString.html +1049 -0
  581. data/docs/brut-js/api/RichString.js.html +164 -0
  582. data/docs/brut-js/api/Tabs.html +295 -0
  583. data/docs/brut-js/api/Tabs.js.html +219 -0
  584. data/docs/brut-js/api/Tracing.html +277 -0
  585. data/docs/brut-js/api/Tracing.js.html +298 -0
  586. data/docs/brut-js/api/external-CustomElementRegistry.html +140 -0
  587. data/docs/brut-js/api/external-Performance.html +138 -0
  588. data/docs/brut-js/api/external-Promise.html +138 -0
  589. data/docs/brut-js/api/external-ValidityState.html +138 -0
  590. data/docs/brut-js/api/external-Window.html +233 -0
  591. data/docs/brut-js/api/external-fetch.html +138 -0
  592. data/docs/brut-js/api/global.html +400 -0
  593. data/docs/brut-js/api/index.html +168 -0
  594. data/docs/brut-js/api/index.js.html +181 -0
  595. data/docs/brut-js/api/module-testing.html +383 -0
  596. data/docs/brut-js/api/scripts/linenumber.js +25 -0
  597. data/docs/brut-js/api/scripts/prettify/Apache-License-2.0.txt +202 -0
  598. data/docs/brut-js/api/scripts/prettify/lang-css.js +2 -0
  599. data/docs/brut-js/api/scripts/prettify/prettify.js +28 -0
  600. data/docs/brut-js/api/styles/jsdoc-default.css +327 -0
  601. data/docs/brut-js/api/styles/prettify-jsdoc.css +111 -0
  602. data/docs/brut-js/api/styles/prettify-tomorrow.css +132 -0
  603. data/docs/brut-js/api/testing.AssetMetadata.html +172 -0
  604. data/docs/brut-js/api/testing.AssetMetadataLoader.html +171 -0
  605. data/docs/brut-js/api/testing.CustomElementTest.html +679 -0
  606. data/docs/brut-js/api/testing.DOMCreator.html +171 -0
  607. data/docs/brut-js/api/testing_AssetMetadata.js.html +86 -0
  608. data/docs/brut-js/api/testing_AssetMetadataLoader.js.html +76 -0
  609. data/docs/brut-js/api/testing_CustomElementTest.js.html +286 -0
  610. data/docs/brut-js/api/testing_DOMCreator.js.html +96 -0
  611. data/docs/brut-js/api/testing_index.js.html +99 -0
  612. data/docs/brut-js.html +35 -0
  613. data/docs/business-logic.html +24 -0
  614. data/docs/cli.html +150 -0
  615. data/docs/components.html +127 -0
  616. data/docs/configuration.html +101 -0
  617. data/docs/css.html +44 -0
  618. data/docs/custom-element-tests.html +92 -0
  619. data/docs/database-access.html +86 -0
  620. data/docs/database-schema.html +86 -0
  621. data/docs/deployment.html +24 -0
  622. data/docs/dev-environment.html +34 -0
  623. data/docs/doc-conventions.html +24 -0
  624. data/docs/end-to-end-tests.html +49 -0
  625. data/docs/flash-and-session.html +116 -0
  626. data/docs/forms.html +402 -0
  627. data/docs/getting-started.html +25 -0
  628. data/docs/handlers.html +92 -0
  629. data/docs/hashmap.json +1 -0
  630. data/docs/hooks.html +103 -0
  631. data/docs/i18n.html +46 -0
  632. data/docs/images/logo-300.png +0 -0
  633. data/docs/images/logo.png +0 -0
  634. data/docs/index.html +24 -0
  635. data/docs/instrumentation.html +58 -0
  636. data/docs/javascript.html +54 -0
  637. data/docs/jobs.html +24 -0
  638. data/docs/keyword-injection.html +48 -0
  639. data/docs/markdown-examples.html +56 -0
  640. data/docs/middleware.html +43 -0
  641. data/docs/not-released.html +24 -0
  642. data/docs/overview.html +156 -0
  643. data/docs/pages.html +145 -0
  644. data/docs/routes.html +52 -0
  645. data/docs/security.html +24 -0
  646. data/docs/seed-data.html +37 -0
  647. data/docs/space-time-continuum.html +24 -0
  648. data/docs/tutorial.html +24 -0
  649. data/docs/unit-tests.html +36 -0
  650. data/docs/vp-icons.css +1 -0
  651. data/lib/brut/back_end/seed_data.rb +19 -2
  652. data/lib/brut/back_end/sidekiq/middlewares/server.rb +2 -1
  653. data/lib/brut/back_end/sidekiq/middlewares.rb +2 -1
  654. data/lib/brut/back_end/sidekiq.rb +2 -1
  655. data/lib/brut/back_end/validator.rb +5 -1
  656. data/lib/brut/back_end.rb +4 -2
  657. data/lib/brut/cli/app_runner.rb +1 -1
  658. data/lib/brut/cli/apps/test.rb +5 -0
  659. data/lib/brut/cli.rb +4 -3
  660. data/lib/brut/factory_bot.rb +0 -5
  661. data/lib/brut/framework/app.rb +70 -5
  662. data/lib/brut/framework/config.rb +5 -3
  663. data/lib/brut/framework/container.rb +3 -2
  664. data/lib/brut/framework/errors.rb +12 -4
  665. data/lib/brut/framework/mcp.rb +58 -1
  666. data/lib/brut/framework/project_environment.rb +6 -2
  667. data/lib/brut/framework.rb +1 -1
  668. data/lib/brut/front_end/component.rb +69 -71
  669. data/lib/brut/front_end/components/constraint_violations.rb +1 -4
  670. data/lib/brut/front_end/components/form_tag.rb +1 -1
  671. data/lib/brut/front_end/components/input.rb +3 -3
  672. data/lib/brut/front_end/components/inputs/csrf_token.rb +1 -1
  673. data/lib/brut/front_end/components/inputs/{text_field.rb → input_tag.rb} +7 -9
  674. data/lib/brut/front_end/components/inputs/radio_button.rb +1 -1
  675. data/lib/brut/front_end/components/inputs/select_tag_with_options.rb +187 -0
  676. data/lib/brut/front_end/components/inputs/{textarea.rb → textarea_tag.rb} +2 -2
  677. data/lib/brut/front_end/components/time_tag.rb +2 -1
  678. data/lib/brut/front_end/form.rb +4 -4
  679. data/lib/brut/front_end/forms/input.rb +2 -1
  680. data/lib/brut/front_end/forms/input_definition.rb +5 -2
  681. data/lib/brut/front_end/forms/radio_button_group_input.rb +2 -1
  682. data/lib/brut/front_end/forms/radio_button_group_input_definition.rb +2 -2
  683. data/lib/brut/front_end/forms/select_input.rb +2 -4
  684. data/lib/brut/front_end/forms/select_input_definition.rb +2 -2
  685. data/lib/brut/front_end/handler.rb +28 -26
  686. data/lib/brut/front_end/handlers/csp_reporting_handler.rb +5 -2
  687. data/lib/brut/front_end/handlers/instrumentation_handler.rb +8 -4
  688. data/lib/brut/front_end/handlers/locale_detection_handler.rb +9 -5
  689. data/lib/brut/front_end/handlers/missing_handler.rb +5 -2
  690. data/lib/brut/front_end/layout.rb +16 -0
  691. data/lib/brut/front_end/page.rb +52 -29
  692. data/lib/brut/front_end/request_context.rb +3 -2
  693. data/lib/brut/front_end/routing.rb +5 -1
  694. data/lib/brut/front_end.rb +4 -13
  695. data/lib/brut/i18n/base_methods.rb +167 -79
  696. data/lib/brut/i18n/for_back_end.rb +4 -0
  697. data/lib/brut/i18n/for_cli.rb +4 -0
  698. data/lib/brut/i18n/for_html.rb +32 -4
  699. data/lib/brut/i18n/http_accept_language.rb +47 -0
  700. data/lib/brut/instrumentation/open_telemetry.rb +36 -1
  701. data/lib/brut/instrumentation.rb +3 -5
  702. data/lib/brut/sinatra_helpers.rb +11 -3
  703. data/lib/brut/spec_support/component_support.rb +30 -16
  704. data/lib/brut/spec_support/e2e_support.rb +1 -1
  705. data/lib/brut/spec_support/e2e_test_server.rb +3 -0
  706. data/lib/brut/spec_support/general_support.rb +3 -0
  707. data/lib/brut/spec_support/handler_support.rb +6 -1
  708. data/lib/brut/spec_support/matcher.rb +1 -0
  709. data/lib/brut/spec_support/matchers/be_page_for.rb +1 -0
  710. data/lib/brut/spec_support/matchers/have_html_attribute.rb +1 -0
  711. data/lib/brut/spec_support/matchers/have_i18n_string.rb +2 -5
  712. data/lib/brut/spec_support/matchers/have_link_to.rb +1 -0
  713. data/lib/brut/spec_support/matchers/have_redirected_to.rb +1 -0
  714. data/lib/brut/spec_support/matchers/have_rendered.rb +1 -0
  715. data/lib/brut/spec_support/matchers/have_returned_rack_response.rb +44 -0
  716. data/lib/brut/spec_support.rb +1 -1
  717. data/lib/brut/version.rb +1 -1
  718. data/lib/brut.rb +5 -4
  719. data/lib/sequel/extensions/brut_migrations.rb +1 -1
  720. metadata +648 -13
  721. data/doc-src/architecture.md +0 -102
  722. data/doc-src/assets.md +0 -98
  723. data/doc-src/forms.md +0 -214
  724. data/doc-src/handlers.md +0 -83
  725. data/doc-src/javascript.md +0 -265
  726. data/doc-src/pages.md +0 -210
  727. data/doc-src/route-hooks.md +0 -59
  728. data/lib/brut/front_end/components/inputs/select.rb +0 -117
data/docs/brut-css/classes/positioning.html ADDED
@@ -0,0 +1,1751 @@
1
+ <!doctype html>
2
+ <html class="ma-0 pa-0 h-100" lang="en">
3
+ <head>
4
+ <link rel="stylesheet" href="/brut-css/brut.css">
5
+ <link rel="stylesheet" href="/brut-css/docs.css">
6
+ <link rel="stylesheet" href="/brut-css/prism-twilight.min.css">
7
+ </head>
8
+
9
+ <body class="flex flex-column ff-sans ma-0 pa-0 h-100">
10
+ <header class="pos-sticky top-0 bg-gray-700 pa-3 z-5 shadow-2">
11
+ <div class="flex gap-3 justify-between items-center">
12
+ <h1><a href="/brut-css" class="black tdn">BrutCSS Reference Documentation</a></h1>
13
+ <ul class="lst-none pl-0 flex gap-2 justify-end items-center">
14
+ <form class="flex items-center gap-1 mr-3">
15
+ <label>
16
+ <input type="search" placeholder="e.g. padding-left" class="pa-2 br-2 ba bc-gray-600 bg-white-ish gray-200">
17
+ <span class="sr-only">Search term</span>
18
+ </label>
19
+ <button class="ph-3 pv-2 bg-white gray-100 ba bc-gray-500 br-3 hover-bg-gray-800 pointer flex items-center justify-between">
20
+ <span class="mr-2">Search</span>
21
+ <kbd>&#8984;</kbd>
22
+ <kbd>/</kbd>
23
+ </button>
24
+ </form>
25
+ <li><a href="/" class="red-200 tdn hover-tdu">BrutRB</a></li>
26
+ <span aria-hidden="true">&middot;</span>
27
+ <li><a href="/brut-js" class="gray-200 tdn hover-tdu">BrutJS</a></li>
28
+ <span aria-hidden="true">&middot;</span>
29
+ <li><a href="https://github.com/thirdtank/brut/tree/main/brut-css" class="gray-200 tdn hover-tdu">Code</a></li>
30
+ </ul>
31
+ </div>
32
+ </header>
33
+ <main class="flex overflow-hidden flex-grow-1 flex-shrink-1 flex-basis-0 pos-relative">
34
+ <nav class="overflow-y-auto ph-3 pb-2 pt-4 w-20 bg-gray-800 gray-200 h-100">
35
+
36
+ <h3>Getting Started</h3>
37
+ <ul class="pl-3">
38
+
39
+ <li>
40
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/overview.html">Overview</a>
41
+ </li>
42
+
43
+ <li>
44
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/installation.html">Installation</a>
45
+ </li>
46
+
47
+ <li>
48
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/core-concepts.html">Core Concepts</a>
49
+ </li>
50
+
51
+ <li>
52
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/getting-started/simple-example.html">Simple Example</a>
53
+ </li>
54
+
55
+ </ul>
56
+
57
+ <h3>Properties</h3>
58
+ <ul class="pl-3">
59
+
60
+ <li>
61
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/colors.html">Colors</a>
62
+ </li>
63
+
64
+ <li>
65
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/spacings.html">Spacings</a>
66
+ </li>
67
+
68
+ <li>
69
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/properties/typography.html">Typography</a>
70
+ </li>
71
+
72
+ </ul>
73
+
74
+ <h3>Classes</h3>
75
+ <ul class="pl-3">
76
+
77
+ <li>
78
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/appearances.html">Appearances</a>
79
+ </li>
80
+
81
+ <li>
82
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/borders.html">Borders</a>
83
+ </li>
84
+
85
+ <li>
86
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/foreground-colors.html">Foreground Colors</a>
87
+ </li>
88
+
89
+ <li>
90
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/background-colors.html">Background Colors</a>
91
+ </li>
92
+
93
+ <li>
94
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/border-colors.html">Border Colors</a>
95
+ </li>
96
+
97
+ <li>
98
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/dimensions.html">Dimensions</a>
99
+ </li>
100
+
101
+ <li>
102
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/flex.html">Flex</a>
103
+ </li>
104
+
105
+ <li>
106
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/layout.html">Layout</a>
107
+ </li>
108
+
109
+ <li>
110
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/lists.html">Lists</a>
111
+ </li>
112
+
113
+ <li>
114
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/positioning.html">Positioning</a>
115
+ </li>
116
+
117
+ <li>
118
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/spacings.html">Spacings</a>
119
+ </li>
120
+
121
+ <li>
122
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/typography.html">Typography</a>
123
+ </li>
124
+
125
+ <li>
126
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/classes/junk-drawer.html">Junk Drawer</a>
127
+ </li>
128
+
129
+ </ul>
130
+
131
+ <h3>Customization</h3>
132
+ <ul class="pl-3">
133
+
134
+ <li>
135
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/design-system.html">Design System</a>
136
+ </li>
137
+
138
+ <li>
139
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/breakpoints.html">Breakpoints</a>
140
+ </li>
141
+
142
+ <li>
143
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/pseudo-classes.html">Pseudo Classes</a>
144
+ </li>
145
+
146
+ <li>
147
+ <a class="black-ish tdu tdn-ns hover-tdu-ns" href="/brut-css/customization/advanced-configuration.html">Advanced Configuration</a>
148
+ </li>
149
+
150
+ </ul>
151
+
152
+
153
+ </nav>
154
+ <section class="overflow-y-auto pt-4 h-100 flex-grow-1 flex-shrink-1 flex-basis-0 flex flex-column">
155
+ <div class="ph-3 pv-2 flex items-start gap-2 justify-between">
156
+
157
+ <article>
158
+ <h2 class="}-5">Positioning Classes</h2>
159
+
160
+ <p>Positioning utilities.</p>
161
+
162
+
163
+
164
+
165
+ <h3 class="f-5 mt-4" id="class-scale:z-index">Z Index</h3>
166
+ <p class="p">
167
+ <p>Z-index. This is a six-step scale with 9999 and auto added. Please note that <code>z-index</code> may not do what you want if you don’t understand stacking contexts.</p>
168
+
169
+ </p>
170
+
171
+ <h4 class="f-2 b">See Also</h3>
172
+ <ul class="see-also">
173
+
174
+ <li><p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context.html">Stacking Context</a> (external)</p>
175
+ </li>
176
+
177
+ </ul>
178
+
179
+
180
+ <div class="mt-4 flex gap-3 items-center justify-between" id="z-0">
181
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.z-0</code></h4>
182
+ <pre class="f-3 highlighted-code"><span class="token selector">.z-0</span> <span class="token punctuation">{</span>
183
+ <span class="token property">z-index</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
184
+ <span class="token punctuation">}</span></pre>
185
+ </div>
186
+ <div class="ml-3">
187
+ <p class="p">
188
+
189
+ </p>
190
+
191
+
192
+ </div>
193
+
194
+ <div class="mt-4 flex gap-3 items-center justify-between" id="z-1">
195
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.z-1</code></h4>
196
+ <pre class="f-3 highlighted-code"><span class="token selector">.z-1</span> <span class="token punctuation">{</span>
197
+ <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
198
+ <span class="token punctuation">}</span></pre>
199
+ </div>
200
+ <div class="ml-3">
201
+ <p class="p">
202
+
203
+ </p>
204
+
205
+
206
+ </div>
207
+
208
+ <div class="mt-4 flex gap-3 items-center justify-between" id="z-2">
209
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.z-2</code></h4>
210
+ <pre class="f-3 highlighted-code"><span class="token selector">.z-2</span> <span class="token punctuation">{</span>
211
+ <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
212
+ <span class="token punctuation">}</span></pre>
213
+ </div>
214
+ <div class="ml-3">
215
+ <p class="p">
216
+
217
+ </p>
218
+
219
+
220
+ </div>
221
+
222
+ <div class="mt-4 flex gap-3 items-center justify-between" id="z-3">
223
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.z-3</code></h4>
224
+ <pre class="f-3 highlighted-code"><span class="token selector">.z-3</span> <span class="token punctuation">{</span>
225
+ <span class="token property">z-index</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
226
+ <span class="token punctuation">}</span></pre>
227
+ </div>
228
+ <div class="ml-3">
229
+ <p class="p">
230
+
231
+ </p>
232
+
233
+
234
+ </div>
235
+
236
+ <div class="mt-4 flex gap-3 items-center justify-between" id="z-4">
237
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.z-4</code></h4>
238
+ <pre class="f-3 highlighted-code"><span class="token selector">.z-4</span> <span class="token punctuation">{</span>
239
+ <span class="token property">z-index</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span>
240
+ <span class="token punctuation">}</span></pre>
241
+ </div>
242
+ <div class="ml-3">
243
+ <p class="p">
244
+
245
+ </p>
246
+
247
+
248
+ </div>
249
+
250
+ <div class="mt-4 flex gap-3 items-center justify-between" id="z-5">
251
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.z-5</code></h4>
252
+ <pre class="f-3 highlighted-code"><span class="token selector">.z-5</span> <span class="token punctuation">{</span>
253
+ <span class="token property">z-index</span><span class="token punctuation">:</span> 5<span class="token punctuation">;</span>
254
+ <span class="token punctuation">}</span></pre>
255
+ </div>
256
+ <div class="ml-3">
257
+ <p class="p">
258
+
259
+ </p>
260
+
261
+
262
+ </div>
263
+
264
+ <div class="mt-4 flex gap-3 items-center justify-between" id="z-9999">
265
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.z-9999</code></h4>
266
+ <pre class="f-3 highlighted-code"><span class="token selector">.z-9999</span> <span class="token punctuation">{</span>
267
+ <span class="token property">z-index</span><span class="token punctuation">:</span> 9999<span class="token punctuation">;</span>
268
+ <span class="token punctuation">}</span></pre>
269
+ </div>
270
+ <div class="ml-3">
271
+ <p class="p">
272
+
273
+ </p>
274
+
275
+
276
+ </div>
277
+
278
+ <div class="mt-4 flex gap-3 items-center justify-between" id="z-auto">
279
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.z-auto</code></h4>
280
+ <pre class="f-3 highlighted-code"><span class="token selector">.z-auto</span> <span class="token punctuation">{</span>
281
+ <span class="token property">z-index</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
282
+ <span class="token punctuation">}</span></pre>
283
+ </div>
284
+ <div class="ml-3">
285
+ <p class="p">
286
+
287
+ </p>
288
+
289
+
290
+ </div>
291
+
292
+
293
+ <h3 class="f-5 mt-4" id="class-group:vertical-align">Vertical Align</h3>
294
+ <p class="p">
295
+ <p>Vertical alignment. Please be aware that <code>vertical-align</code> only applies to inline, inline-block, and table-cell elements. As such, confidently vertically aligning things remains a just out of reach for the human race.</p>
296
+
297
+ </p>
298
+
299
+
300
+ <div class="mt-4 flex gap-3 items-center justify-between" id="va-baseline">
301
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.va-baseline</code></h4>
302
+ <pre class="f-3 highlighted-code"><span class="token selector">.va-baseline</span> <span class="token punctuation">{</span>
303
+ <span class="token property">vertical-align</span><span class="token punctuation">:</span> baseline<span class="token punctuation">;</span>
304
+ <span class="token punctuation">}</span></pre>
305
+ </div>
306
+ <div class="ml-3">
307
+ <p class="p">
308
+
309
+ </p>
310
+
311
+
312
+ </div>
313
+
314
+ <div class="mt-4 flex gap-3 items-center justify-between" id="va-middle">
315
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.va-middle</code></h4>
316
+ <pre class="f-3 highlighted-code"><span class="token selector">.va-middle</span> <span class="token punctuation">{</span>
317
+ <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
318
+ <span class="token punctuation">}</span></pre>
319
+ </div>
320
+ <div class="ml-3">
321
+ <p class="p">
322
+
323
+ </p>
324
+
325
+
326
+ </div>
327
+
328
+ <div class="mt-4 flex gap-3 items-center justify-between" id="va-top">
329
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.va-top</code></h4>
330
+ <pre class="f-3 highlighted-code"><span class="token selector">.va-top</span> <span class="token punctuation">{</span>
331
+ <span class="token property">vertical-align</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span>
332
+ <span class="token punctuation">}</span></pre>
333
+ </div>
334
+ <div class="ml-3">
335
+ <p class="p">
336
+
337
+ </p>
338
+
339
+
340
+ </div>
341
+
342
+ <div class="mt-4 flex gap-3 items-center justify-between" id="va-bottom">
343
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.va-bottom</code></h4>
344
+ <pre class="f-3 highlighted-code"><span class="token selector">.va-bottom</span> <span class="token punctuation">{</span>
345
+ <span class="token property">vertical-align</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span>
346
+ <span class="token punctuation">}</span></pre>
347
+ </div>
348
+ <div class="ml-3">
349
+ <p class="p">
350
+
351
+ </p>
352
+
353
+
354
+ </div>
355
+
356
+
357
+ <h3 class="f-5 mt-4" id="class-group:position">Position</h3>
358
+ <p class="p">
359
+ <p>Positions</p>
360
+
361
+ </p>
362
+
363
+
364
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pos-static">
365
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pos-static</code></h4>
366
+ <pre class="f-3 highlighted-code"><span class="token selector">.pos-static</span> <span class="token punctuation">{</span>
367
+ <span class="token property">position</span><span class="token punctuation">:</span> static<span class="token punctuation">;</span>
368
+ <span class="token punctuation">}</span></pre>
369
+ </div>
370
+ <div class="ml-3">
371
+ <p class="p">
372
+
373
+ </p>
374
+
375
+
376
+ </div>
377
+
378
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pos-relative">
379
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pos-relative</code></h4>
380
+ <pre class="f-3 highlighted-code"><span class="token selector">.pos-relative</span> <span class="token punctuation">{</span>
381
+ <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
382
+ <span class="token punctuation">}</span></pre>
383
+ </div>
384
+ <div class="ml-3">
385
+ <p class="p">
386
+
387
+ </p>
388
+
389
+
390
+ </div>
391
+
392
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pos-absolute">
393
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pos-absolute</code></h4>
394
+ <pre class="f-3 highlighted-code"><span class="token selector">.pos-absolute</span> <span class="token punctuation">{</span>
395
+ <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
396
+ <span class="token punctuation">}</span></pre>
397
+ </div>
398
+ <div class="ml-3">
399
+ <p class="p">
400
+
401
+ </p>
402
+
403
+
404
+ </div>
405
+
406
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pos-fixed">
407
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pos-fixed</code></h4>
408
+ <pre class="f-3 highlighted-code"><span class="token selector">.pos-fixed</span> <span class="token punctuation">{</span>
409
+ <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
410
+ <span class="token punctuation">}</span></pre>
411
+ </div>
412
+ <div class="ml-3">
413
+ <p class="p">
414
+
415
+ </p>
416
+
417
+
418
+ </div>
419
+
420
+ <div class="mt-4 flex gap-3 items-center justify-between" id="pos-sticky">
421
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.pos-sticky</code></h4>
422
+ <pre class="f-3 highlighted-code"><span class="token selector">.pos-sticky</span> <span class="token punctuation">{</span>
423
+ <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span>
424
+ <span class="token punctuation">}</span></pre>
425
+ </div>
426
+ <div class="ml-3">
427
+ <p class="p">
428
+
429
+ </p>
430
+
431
+
432
+ </div>
433
+
434
+
435
+ <h3 class="f-5 mt-4" id="class-scale:top-left-right-bottom">Top/Left/Right/Bottom</h3>
436
+ <p class="p">
437
+ <p>Top/Left/Right/Bottom. These are 17-step scales from -8 to positive 8, based on the <a href="/brut-css/properties/spacings.html#property-scale:spacing">Spacing</a> scale properties.</p>
438
+
439
+ </p>
440
+
441
+
442
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top-0">
443
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top-0</code></h4>
444
+ <pre class="f-3 highlighted-code"><span class="token selector">.top-0</span> <span class="token punctuation">{</span>
445
+ <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
446
+ <span class="token punctuation">}</span></pre>
447
+ </div>
448
+ <div class="ml-3">
449
+ <p class="p">
450
+
451
+ </p>
452
+
453
+
454
+ </div>
455
+
456
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top-1">
457
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top-1</code></h4>
458
+ <pre class="f-3 highlighted-code"><span class="token selector">.top-1</span> <span class="token punctuation">{</span>
459
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
460
+ <span class="token punctuation">}</span></pre>
461
+ </div>
462
+ <div class="ml-3">
463
+ <p class="p">
464
+
465
+ </p>
466
+
467
+
468
+ </div>
469
+
470
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top-2">
471
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top-2</code></h4>
472
+ <pre class="f-3 highlighted-code"><span class="token selector">.top-2</span> <span class="token punctuation">{</span>
473
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
474
+ <span class="token punctuation">}</span></pre>
475
+ </div>
476
+ <div class="ml-3">
477
+ <p class="p">
478
+
479
+ </p>
480
+
481
+
482
+ </div>
483
+
484
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top-3">
485
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top-3</code></h4>
486
+ <pre class="f-3 highlighted-code"><span class="token selector">.top-3</span> <span class="token punctuation">{</span>
487
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
488
+ <span class="token punctuation">}</span></pre>
489
+ </div>
490
+ <div class="ml-3">
491
+ <p class="p">
492
+
493
+ </p>
494
+
495
+
496
+ </div>
497
+
498
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top-4">
499
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top-4</code></h4>
500
+ <pre class="f-3 highlighted-code"><span class="token selector">.top-4</span> <span class="token punctuation">{</span>
501
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
502
+ <span class="token punctuation">}</span></pre>
503
+ </div>
504
+ <div class="ml-3">
505
+ <p class="p">
506
+
507
+ </p>
508
+
509
+
510
+ </div>
511
+
512
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top-5">
513
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top-5</code></h4>
514
+ <pre class="f-3 highlighted-code"><span class="token selector">.top-5</span> <span class="token punctuation">{</span>
515
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
516
+ <span class="token punctuation">}</span></pre>
517
+ </div>
518
+ <div class="ml-3">
519
+ <p class="p">
520
+
521
+ </p>
522
+
523
+
524
+ </div>
525
+
526
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top-6">
527
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top-6</code></h4>
528
+ <pre class="f-3 highlighted-code"><span class="token selector">.top-6</span> <span class="token punctuation">{</span>
529
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
530
+ <span class="token punctuation">}</span></pre>
531
+ </div>
532
+ <div class="ml-3">
533
+ <p class="p">
534
+
535
+ </p>
536
+
537
+
538
+ </div>
539
+
540
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top-7">
541
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top-7</code></h4>
542
+ <pre class="f-3 highlighted-code"><span class="token selector">.top-7</span> <span class="token punctuation">{</span>
543
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
544
+ <span class="token punctuation">}</span></pre>
545
+ </div>
546
+ <div class="ml-3">
547
+ <p class="p">
548
+
549
+ </p>
550
+
551
+
552
+ </div>
553
+
554
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top-8">
555
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top-8</code></h4>
556
+ <pre class="f-3 highlighted-code"><span class="token selector">.top-8</span> <span class="token punctuation">{</span>
557
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
558
+ <span class="token punctuation">}</span></pre>
559
+ </div>
560
+ <div class="ml-3">
561
+ <p class="p">
562
+
563
+ </p>
564
+
565
+
566
+ </div>
567
+
568
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top--1">
569
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top--1</code></h4>
570
+ <pre class="f-3 highlighted-code"><span class="token selector">.top--1</span> <span class="token punctuation">{</span>
571
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
572
+ <span class="token punctuation">}</span></pre>
573
+ </div>
574
+ <div class="ml-3">
575
+ <p class="p">
576
+
577
+ </p>
578
+
579
+
580
+ </div>
581
+
582
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top--2">
583
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top--2</code></h4>
584
+ <pre class="f-3 highlighted-code"><span class="token selector">.top--2</span> <span class="token punctuation">{</span>
585
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
586
+ <span class="token punctuation">}</span></pre>
587
+ </div>
588
+ <div class="ml-3">
589
+ <p class="p">
590
+
591
+ </p>
592
+
593
+
594
+ </div>
595
+
596
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top--3">
597
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top--3</code></h4>
598
+ <pre class="f-3 highlighted-code"><span class="token selector">.top--3</span> <span class="token punctuation">{</span>
599
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
600
+ <span class="token punctuation">}</span></pre>
601
+ </div>
602
+ <div class="ml-3">
603
+ <p class="p">
604
+
605
+ </p>
606
+
607
+
608
+ </div>
609
+
610
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top--4">
611
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top--4</code></h4>
612
+ <pre class="f-3 highlighted-code"><span class="token selector">.top--4</span> <span class="token punctuation">{</span>
613
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
614
+ <span class="token punctuation">}</span></pre>
615
+ </div>
616
+ <div class="ml-3">
617
+ <p class="p">
618
+
619
+ </p>
620
+
621
+
622
+ </div>
623
+
624
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top--5">
625
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top--5</code></h4>
626
+ <pre class="f-3 highlighted-code"><span class="token selector">.top--5</span> <span class="token punctuation">{</span>
627
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
628
+ <span class="token punctuation">}</span></pre>
629
+ </div>
630
+ <div class="ml-3">
631
+ <p class="p">
632
+
633
+ </p>
634
+
635
+
636
+ </div>
637
+
638
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top--6">
639
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top--6</code></h4>
640
+ <pre class="f-3 highlighted-code"><span class="token selector">.top--6</span> <span class="token punctuation">{</span>
641
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
642
+ <span class="token punctuation">}</span></pre>
643
+ </div>
644
+ <div class="ml-3">
645
+ <p class="p">
646
+
647
+ </p>
648
+
649
+
650
+ </div>
651
+
652
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top--7">
653
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top--7</code></h4>
654
+ <pre class="f-3 highlighted-code"><span class="token selector">.top--7</span> <span class="token punctuation">{</span>
655
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
656
+ <span class="token punctuation">}</span></pre>
657
+ </div>
658
+ <div class="ml-3">
659
+ <p class="p">
660
+
661
+ </p>
662
+
663
+
664
+ </div>
665
+
666
+ <div class="mt-4 flex gap-3 items-center justify-between" id="top--8">
667
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.top--8</code></h4>
668
+ <pre class="f-3 highlighted-code"><span class="token selector">.top--8</span> <span class="token punctuation">{</span>
669
+ <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
670
+ <span class="token punctuation">}</span></pre>
671
+ </div>
672
+ <div class="ml-3">
673
+ <p class="p">
674
+
675
+ </p>
676
+
677
+
678
+ </div>
679
+
680
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left-0">
681
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left-0</code></h4>
682
+ <pre class="f-3 highlighted-code"><span class="token selector">.left-0</span> <span class="token punctuation">{</span>
683
+ <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
684
+ <span class="token punctuation">}</span></pre>
685
+ </div>
686
+ <div class="ml-3">
687
+ <p class="p">
688
+
689
+ </p>
690
+
691
+
692
+ </div>
693
+
694
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left-1">
695
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left-1</code></h4>
696
+ <pre class="f-3 highlighted-code"><span class="token selector">.left-1</span> <span class="token punctuation">{</span>
697
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
698
+ <span class="token punctuation">}</span></pre>
699
+ </div>
700
+ <div class="ml-3">
701
+ <p class="p">
702
+
703
+ </p>
704
+
705
+
706
+ </div>
707
+
708
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left-2">
709
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left-2</code></h4>
710
+ <pre class="f-3 highlighted-code"><span class="token selector">.left-2</span> <span class="token punctuation">{</span>
711
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
712
+ <span class="token punctuation">}</span></pre>
713
+ </div>
714
+ <div class="ml-3">
715
+ <p class="p">
716
+
717
+ </p>
718
+
719
+
720
+ </div>
721
+
722
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left-3">
723
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left-3</code></h4>
724
+ <pre class="f-3 highlighted-code"><span class="token selector">.left-3</span> <span class="token punctuation">{</span>
725
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
726
+ <span class="token punctuation">}</span></pre>
727
+ </div>
728
+ <div class="ml-3">
729
+ <p class="p">
730
+
731
+ </p>
732
+
733
+
734
+ </div>
735
+
736
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left-4">
737
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left-4</code></h4>
738
+ <pre class="f-3 highlighted-code"><span class="token selector">.left-4</span> <span class="token punctuation">{</span>
739
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
740
+ <span class="token punctuation">}</span></pre>
741
+ </div>
742
+ <div class="ml-3">
743
+ <p class="p">
744
+
745
+ </p>
746
+
747
+
748
+ </div>
749
+
750
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left-5">
751
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left-5</code></h4>
752
+ <pre class="f-3 highlighted-code"><span class="token selector">.left-5</span> <span class="token punctuation">{</span>
753
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
754
+ <span class="token punctuation">}</span></pre>
755
+ </div>
756
+ <div class="ml-3">
757
+ <p class="p">
758
+
759
+ </p>
760
+
761
+
762
+ </div>
763
+
764
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left-6">
765
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left-6</code></h4>
766
+ <pre class="f-3 highlighted-code"><span class="token selector">.left-6</span> <span class="token punctuation">{</span>
767
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
768
+ <span class="token punctuation">}</span></pre>
769
+ </div>
770
+ <div class="ml-3">
771
+ <p class="p">
772
+
773
+ </p>
774
+
775
+
776
+ </div>
777
+
778
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left-7">
779
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left-7</code></h4>
780
+ <pre class="f-3 highlighted-code"><span class="token selector">.left-7</span> <span class="token punctuation">{</span>
781
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
782
+ <span class="token punctuation">}</span></pre>
783
+ </div>
784
+ <div class="ml-3">
785
+ <p class="p">
786
+
787
+ </p>
788
+
789
+
790
+ </div>
791
+
792
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left-8">
793
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left-8</code></h4>
794
+ <pre class="f-3 highlighted-code"><span class="token selector">.left-8</span> <span class="token punctuation">{</span>
795
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
796
+ <span class="token punctuation">}</span></pre>
797
+ </div>
798
+ <div class="ml-3">
799
+ <p class="p">
800
+
801
+ </p>
802
+
803
+
804
+ </div>
805
+
806
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left--1">
807
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left--1</code></h4>
808
+ <pre class="f-3 highlighted-code"><span class="token selector">.left--1</span> <span class="token punctuation">{</span>
809
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
810
+ <span class="token punctuation">}</span></pre>
811
+ </div>
812
+ <div class="ml-3">
813
+ <p class="p">
814
+
815
+ </p>
816
+
817
+
818
+ </div>
819
+
820
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left--2">
821
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left--2</code></h4>
822
+ <pre class="f-3 highlighted-code"><span class="token selector">.left--2</span> <span class="token punctuation">{</span>
823
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
824
+ <span class="token punctuation">}</span></pre>
825
+ </div>
826
+ <div class="ml-3">
827
+ <p class="p">
828
+
829
+ </p>
830
+
831
+
832
+ </div>
833
+
834
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left--3">
835
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left--3</code></h4>
836
+ <pre class="f-3 highlighted-code"><span class="token selector">.left--3</span> <span class="token punctuation">{</span>
837
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
838
+ <span class="token punctuation">}</span></pre>
839
+ </div>
840
+ <div class="ml-3">
841
+ <p class="p">
842
+
843
+ </p>
844
+
845
+
846
+ </div>
847
+
848
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left--4">
849
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left--4</code></h4>
850
+ <pre class="f-3 highlighted-code"><span class="token selector">.left--4</span> <span class="token punctuation">{</span>
851
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
852
+ <span class="token punctuation">}</span></pre>
853
+ </div>
854
+ <div class="ml-3">
855
+ <p class="p">
856
+
857
+ </p>
858
+
859
+
860
+ </div>
861
+
862
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left--5">
863
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left--5</code></h4>
864
+ <pre class="f-3 highlighted-code"><span class="token selector">.left--5</span> <span class="token punctuation">{</span>
865
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
866
+ <span class="token punctuation">}</span></pre>
867
+ </div>
868
+ <div class="ml-3">
869
+ <p class="p">
870
+
871
+ </p>
872
+
873
+
874
+ </div>
875
+
876
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left--6">
877
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left--6</code></h4>
878
+ <pre class="f-3 highlighted-code"><span class="token selector">.left--6</span> <span class="token punctuation">{</span>
879
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
880
+ <span class="token punctuation">}</span></pre>
881
+ </div>
882
+ <div class="ml-3">
883
+ <p class="p">
884
+
885
+ </p>
886
+
887
+
888
+ </div>
889
+
890
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left--7">
891
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left--7</code></h4>
892
+ <pre class="f-3 highlighted-code"><span class="token selector">.left--7</span> <span class="token punctuation">{</span>
893
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
894
+ <span class="token punctuation">}</span></pre>
895
+ </div>
896
+ <div class="ml-3">
897
+ <p class="p">
898
+
899
+ </p>
900
+
901
+
902
+ </div>
903
+
904
+ <div class="mt-4 flex gap-3 items-center justify-between" id="left--8">
905
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.left--8</code></h4>
906
+ <pre class="f-3 highlighted-code"><span class="token selector">.left--8</span> <span class="token punctuation">{</span>
907
+ <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
908
+ <span class="token punctuation">}</span></pre>
909
+ </div>
910
+ <div class="ml-3">
911
+ <p class="p">
912
+
913
+ </p>
914
+
915
+
916
+ </div>
917
+
918
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right-0">
919
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right-0</code></h4>
920
+ <pre class="f-3 highlighted-code"><span class="token selector">.right-0</span> <span class="token punctuation">{</span>
921
+ <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
922
+ <span class="token punctuation">}</span></pre>
923
+ </div>
924
+ <div class="ml-3">
925
+ <p class="p">
926
+
927
+ </p>
928
+
929
+
930
+ </div>
931
+
932
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right-1">
933
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right-1</code></h4>
934
+ <pre class="f-3 highlighted-code"><span class="token selector">.right-1</span> <span class="token punctuation">{</span>
935
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
936
+ <span class="token punctuation">}</span></pre>
937
+ </div>
938
+ <div class="ml-3">
939
+ <p class="p">
940
+
941
+ </p>
942
+
943
+
944
+ </div>
945
+
946
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right-2">
947
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right-2</code></h4>
948
+ <pre class="f-3 highlighted-code"><span class="token selector">.right-2</span> <span class="token punctuation">{</span>
949
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
950
+ <span class="token punctuation">}</span></pre>
951
+ </div>
952
+ <div class="ml-3">
953
+ <p class="p">
954
+
955
+ </p>
956
+
957
+
958
+ </div>
959
+
960
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right-3">
961
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right-3</code></h4>
962
+ <pre class="f-3 highlighted-code"><span class="token selector">.right-3</span> <span class="token punctuation">{</span>
963
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
964
+ <span class="token punctuation">}</span></pre>
965
+ </div>
966
+ <div class="ml-3">
967
+ <p class="p">
968
+
969
+ </p>
970
+
971
+
972
+ </div>
973
+
974
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right-4">
975
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right-4</code></h4>
976
+ <pre class="f-3 highlighted-code"><span class="token selector">.right-4</span> <span class="token punctuation">{</span>
977
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
978
+ <span class="token punctuation">}</span></pre>
979
+ </div>
980
+ <div class="ml-3">
981
+ <p class="p">
982
+
983
+ </p>
984
+
985
+
986
+ </div>
987
+
988
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right-5">
989
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right-5</code></h4>
990
+ <pre class="f-3 highlighted-code"><span class="token selector">.right-5</span> <span class="token punctuation">{</span>
991
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
992
+ <span class="token punctuation">}</span></pre>
993
+ </div>
994
+ <div class="ml-3">
995
+ <p class="p">
996
+
997
+ </p>
998
+
999
+
1000
+ </div>
1001
+
1002
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right-6">
1003
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right-6</code></h4>
1004
+ <pre class="f-3 highlighted-code"><span class="token selector">.right-6</span> <span class="token punctuation">{</span>
1005
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1006
+ <span class="token punctuation">}</span></pre>
1007
+ </div>
1008
+ <div class="ml-3">
1009
+ <p class="p">
1010
+
1011
+ </p>
1012
+
1013
+
1014
+ </div>
1015
+
1016
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right-7">
1017
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right-7</code></h4>
1018
+ <pre class="f-3 highlighted-code"><span class="token selector">.right-7</span> <span class="token punctuation">{</span>
1019
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1020
+ <span class="token punctuation">}</span></pre>
1021
+ </div>
1022
+ <div class="ml-3">
1023
+ <p class="p">
1024
+
1025
+ </p>
1026
+
1027
+
1028
+ </div>
1029
+
1030
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right-8">
1031
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right-8</code></h4>
1032
+ <pre class="f-3 highlighted-code"><span class="token selector">.right-8</span> <span class="token punctuation">{</span>
1033
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1034
+ <span class="token punctuation">}</span></pre>
1035
+ </div>
1036
+ <div class="ml-3">
1037
+ <p class="p">
1038
+
1039
+ </p>
1040
+
1041
+
1042
+ </div>
1043
+
1044
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right--1">
1045
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right--1</code></h4>
1046
+ <pre class="f-3 highlighted-code"><span class="token selector">.right--1</span> <span class="token punctuation">{</span>
1047
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1048
+ <span class="token punctuation">}</span></pre>
1049
+ </div>
1050
+ <div class="ml-3">
1051
+ <p class="p">
1052
+
1053
+ </p>
1054
+
1055
+
1056
+ </div>
1057
+
1058
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right--2">
1059
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right--2</code></h4>
1060
+ <pre class="f-3 highlighted-code"><span class="token selector">.right--2</span> <span class="token punctuation">{</span>
1061
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1062
+ <span class="token punctuation">}</span></pre>
1063
+ </div>
1064
+ <div class="ml-3">
1065
+ <p class="p">
1066
+
1067
+ </p>
1068
+
1069
+
1070
+ </div>
1071
+
1072
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right--3">
1073
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right--3</code></h4>
1074
+ <pre class="f-3 highlighted-code"><span class="token selector">.right--3</span> <span class="token punctuation">{</span>
1075
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1076
+ <span class="token punctuation">}</span></pre>
1077
+ </div>
1078
+ <div class="ml-3">
1079
+ <p class="p">
1080
+
1081
+ </p>
1082
+
1083
+
1084
+ </div>
1085
+
1086
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right--4">
1087
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right--4</code></h4>
1088
+ <pre class="f-3 highlighted-code"><span class="token selector">.right--4</span> <span class="token punctuation">{</span>
1089
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1090
+ <span class="token punctuation">}</span></pre>
1091
+ </div>
1092
+ <div class="ml-3">
1093
+ <p class="p">
1094
+
1095
+ </p>
1096
+
1097
+
1098
+ </div>
1099
+
1100
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right--5">
1101
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right--5</code></h4>
1102
+ <pre class="f-3 highlighted-code"><span class="token selector">.right--5</span> <span class="token punctuation">{</span>
1103
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1104
+ <span class="token punctuation">}</span></pre>
1105
+ </div>
1106
+ <div class="ml-3">
1107
+ <p class="p">
1108
+
1109
+ </p>
1110
+
1111
+
1112
+ </div>
1113
+
1114
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right--6">
1115
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right--6</code></h4>
1116
+ <pre class="f-3 highlighted-code"><span class="token selector">.right--6</span> <span class="token punctuation">{</span>
1117
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1118
+ <span class="token punctuation">}</span></pre>
1119
+ </div>
1120
+ <div class="ml-3">
1121
+ <p class="p">
1122
+
1123
+ </p>
1124
+
1125
+
1126
+ </div>
1127
+
1128
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right--7">
1129
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right--7</code></h4>
1130
+ <pre class="f-3 highlighted-code"><span class="token selector">.right--7</span> <span class="token punctuation">{</span>
1131
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1132
+ <span class="token punctuation">}</span></pre>
1133
+ </div>
1134
+ <div class="ml-3">
1135
+ <p class="p">
1136
+
1137
+ </p>
1138
+
1139
+
1140
+ </div>
1141
+
1142
+ <div class="mt-4 flex gap-3 items-center justify-between" id="right--8">
1143
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.right--8</code></h4>
1144
+ <pre class="f-3 highlighted-code"><span class="token selector">.right--8</span> <span class="token punctuation">{</span>
1145
+ <span class="token property">right</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1146
+ <span class="token punctuation">}</span></pre>
1147
+ </div>
1148
+ <div class="ml-3">
1149
+ <p class="p">
1150
+
1151
+ </p>
1152
+
1153
+
1154
+ </div>
1155
+
1156
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom-0">
1157
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom-0</code></h4>
1158
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom-0</span> <span class="token punctuation">{</span>
1159
+ <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
1160
+ <span class="token punctuation">}</span></pre>
1161
+ </div>
1162
+ <div class="ml-3">
1163
+ <p class="p">
1164
+
1165
+ </p>
1166
+
1167
+
1168
+ </div>
1169
+
1170
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom-1">
1171
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom-1</code></h4>
1172
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom-1</span> <span class="token punctuation">{</span>
1173
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">;</span>
1174
+ <span class="token punctuation">}</span></pre>
1175
+ </div>
1176
+ <div class="ml-3">
1177
+ <p class="p">
1178
+
1179
+ </p>
1180
+
1181
+
1182
+ </div>
1183
+
1184
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom-2">
1185
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom-2</code></h4>
1186
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom-2</span> <span class="token punctuation">{</span>
1187
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">;</span>
1188
+ <span class="token punctuation">}</span></pre>
1189
+ </div>
1190
+ <div class="ml-3">
1191
+ <p class="p">
1192
+
1193
+ </p>
1194
+
1195
+
1196
+ </div>
1197
+
1198
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom-3">
1199
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom-3</code></h4>
1200
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom-3</span> <span class="token punctuation">{</span>
1201
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">;</span>
1202
+ <span class="token punctuation">}</span></pre>
1203
+ </div>
1204
+ <div class="ml-3">
1205
+ <p class="p">
1206
+
1207
+ </p>
1208
+
1209
+
1210
+ </div>
1211
+
1212
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom-4">
1213
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom-4</code></h4>
1214
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom-4</span> <span class="token punctuation">{</span>
1215
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">;</span>
1216
+ <span class="token punctuation">}</span></pre>
1217
+ </div>
1218
+ <div class="ml-3">
1219
+ <p class="p">
1220
+
1221
+ </p>
1222
+
1223
+
1224
+ </div>
1225
+
1226
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom-5">
1227
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom-5</code></h4>
1228
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom-5</span> <span class="token punctuation">{</span>
1229
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">;</span>
1230
+ <span class="token punctuation">}</span></pre>
1231
+ </div>
1232
+ <div class="ml-3">
1233
+ <p class="p">
1234
+
1235
+ </p>
1236
+
1237
+
1238
+ </div>
1239
+
1240
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom-6">
1241
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom-6</code></h4>
1242
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom-6</span> <span class="token punctuation">{</span>
1243
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">;</span>
1244
+ <span class="token punctuation">}</span></pre>
1245
+ </div>
1246
+ <div class="ml-3">
1247
+ <p class="p">
1248
+
1249
+ </p>
1250
+
1251
+
1252
+ </div>
1253
+
1254
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom-7">
1255
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom-7</code></h4>
1256
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom-7</span> <span class="token punctuation">{</span>
1257
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">;</span>
1258
+ <span class="token punctuation">}</span></pre>
1259
+ </div>
1260
+ <div class="ml-3">
1261
+ <p class="p">
1262
+
1263
+ </p>
1264
+
1265
+
1266
+ </div>
1267
+
1268
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom-8">
1269
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom-8</code></h4>
1270
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom-8</span> <span class="token punctuation">{</span>
1271
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">;</span>
1272
+ <span class="token punctuation">}</span></pre>
1273
+ </div>
1274
+ <div class="ml-3">
1275
+ <p class="p">
1276
+
1277
+ </p>
1278
+
1279
+
1280
+ </div>
1281
+
1282
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom--1">
1283
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom--1</code></h4>
1284
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom--1</span> <span class="token punctuation">{</span>
1285
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1286
+ <span class="token punctuation">}</span></pre>
1287
+ </div>
1288
+ <div class="ml-3">
1289
+ <p class="p">
1290
+
1291
+ </p>
1292
+
1293
+
1294
+ </div>
1295
+
1296
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom--2">
1297
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom--2</code></h4>
1298
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom--2</span> <span class="token punctuation">{</span>
1299
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1300
+ <span class="token punctuation">}</span></pre>
1301
+ </div>
1302
+ <div class="ml-3">
1303
+ <p class="p">
1304
+
1305
+ </p>
1306
+
1307
+
1308
+ </div>
1309
+
1310
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom--3">
1311
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom--3</code></h4>
1312
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom--3</span> <span class="token punctuation">{</span>
1313
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1314
+ <span class="token punctuation">}</span></pre>
1315
+ </div>
1316
+ <div class="ml-3">
1317
+ <p class="p">
1318
+
1319
+ </p>
1320
+
1321
+
1322
+ </div>
1323
+
1324
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom--4">
1325
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom--4</code></h4>
1326
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom--4</span> <span class="token punctuation">{</span>
1327
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-4<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1328
+ <span class="token punctuation">}</span></pre>
1329
+ </div>
1330
+ <div class="ml-3">
1331
+ <p class="p">
1332
+
1333
+ </p>
1334
+
1335
+
1336
+ </div>
1337
+
1338
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom--5">
1339
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom--5</code></h4>
1340
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom--5</span> <span class="token punctuation">{</span>
1341
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1342
+ <span class="token punctuation">}</span></pre>
1343
+ </div>
1344
+ <div class="ml-3">
1345
+ <p class="p">
1346
+
1347
+ </p>
1348
+
1349
+
1350
+ </div>
1351
+
1352
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom--6">
1353
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom--6</code></h4>
1354
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom--6</span> <span class="token punctuation">{</span>
1355
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-6<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1356
+ <span class="token punctuation">}</span></pre>
1357
+ </div>
1358
+ <div class="ml-3">
1359
+ <p class="p">
1360
+
1361
+ </p>
1362
+
1363
+
1364
+ </div>
1365
+
1366
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom--7">
1367
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom--7</code></h4>
1368
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom--7</span> <span class="token punctuation">{</span>
1369
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-7<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1370
+ <span class="token punctuation">}</span></pre>
1371
+ </div>
1372
+ <div class="ml-3">
1373
+ <p class="p">
1374
+
1375
+ </p>
1376
+
1377
+
1378
+ </div>
1379
+
1380
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bottom--8">
1381
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bottom--8</code></h4>
1382
+ <pre class="f-3 highlighted-code"><span class="token selector">.bottom--8</span> <span class="token punctuation">{</span>
1383
+ <span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span> -1 * <span class="token function">var</span><span class="token punctuation">(</span>--sp-8<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
1384
+ <span class="token punctuation">}</span></pre>
1385
+ </div>
1386
+ <div class="ml-3">
1387
+ <p class="p">
1388
+
1389
+ </p>
1390
+
1391
+
1392
+ </div>
1393
+
1394
+
1395
+ <h3 class="f-5 mt-4" id="class-group:floats">Floats</h3>
1396
+ <p class="p">
1397
+ <p>Floats: they still exist!</p>
1398
+
1399
+ </p>
1400
+
1401
+
1402
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-l">
1403
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-l</code></h4>
1404
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-l</span> <span class="token punctuation">{</span>
1405
+ <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
1406
+ <span class="token punctuation">}</span></pre>
1407
+ </div>
1408
+ <div class="ml-3">
1409
+ <p class="p">
1410
+
1411
+ </p>
1412
+
1413
+
1414
+ </div>
1415
+
1416
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-r">
1417
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-r</code></h4>
1418
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-r</span> <span class="token punctuation">{</span>
1419
+ <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
1420
+ <span class="token punctuation">}</span></pre>
1421
+ </div>
1422
+ <div class="ml-3">
1423
+ <p class="p">
1424
+
1425
+ </p>
1426
+
1427
+
1428
+ </div>
1429
+
1430
+ <div class="mt-4 flex gap-3 items-center justify-between" id="f-n">
1431
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.f-n</code></h4>
1432
+ <pre class="f-3 highlighted-code"><span class="token selector">.f-n</span> <span class="token punctuation">{</span>
1433
+ <span class="token property">float</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
1434
+ <span class="token punctuation">}</span></pre>
1435
+ </div>
1436
+ <div class="ml-3">
1437
+ <p class="p">
1438
+
1439
+ </p>
1440
+
1441
+
1442
+ </div>
1443
+
1444
+
1445
+ <h3 class="f-5 mt-4" id="class-group:background-position">Background Position</h3>
1446
+ <p class="p">
1447
+ <p>Background positions</p>
1448
+
1449
+ </p>
1450
+
1451
+
1452
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-t">
1453
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-t</code></h4>
1454
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-t</span> <span class="token punctuation">{</span>
1455
+ <span class="token property">background-position</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span>
1456
+ <span class="token punctuation">}</span></pre>
1457
+ </div>
1458
+ <div class="ml-3">
1459
+ <p class="p">
1460
+
1461
+ </p>
1462
+
1463
+
1464
+ </div>
1465
+
1466
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-b">
1467
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-b</code></h4>
1468
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-b</span> <span class="token punctuation">{</span>
1469
+ <span class="token property">background-position</span><span class="token punctuation">:</span> bottom<span class="token punctuation">;</span>
1470
+ <span class="token punctuation">}</span></pre>
1471
+ </div>
1472
+ <div class="ml-3">
1473
+ <p class="p">
1474
+
1475
+ </p>
1476
+
1477
+
1478
+ </div>
1479
+
1480
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-l">
1481
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-l</code></h4>
1482
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-l</span> <span class="token punctuation">{</span>
1483
+ <span class="token property">background-position</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
1484
+ <span class="token punctuation">}</span></pre>
1485
+ </div>
1486
+ <div class="ml-3">
1487
+ <p class="p">
1488
+
1489
+ </p>
1490
+
1491
+
1492
+ </div>
1493
+
1494
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-r">
1495
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-r</code></h4>
1496
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-r</span> <span class="token punctuation">{</span>
1497
+ <span class="token property">background-position</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
1498
+ <span class="token punctuation">}</span></pre>
1499
+ </div>
1500
+ <div class="ml-3">
1501
+ <p class="p">
1502
+
1503
+ </p>
1504
+
1505
+
1506
+ </div>
1507
+
1508
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-c">
1509
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-c</code></h4>
1510
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-c</span> <span class="token punctuation">{</span>
1511
+ <span class="token property">background-position</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
1512
+ <span class="token punctuation">}</span></pre>
1513
+ </div>
1514
+ <div class="ml-3">
1515
+ <p class="p">
1516
+
1517
+ </p>
1518
+
1519
+
1520
+ </div>
1521
+
1522
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-tr">
1523
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-tr</code></h4>
1524
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-tr</span> <span class="token punctuation">{</span>
1525
+ <span class="token property">background-position</span><span class="token punctuation">:</span> top right<span class="token punctuation">;</span>
1526
+ <span class="token punctuation">}</span></pre>
1527
+ </div>
1528
+ <div class="ml-3">
1529
+ <p class="p">
1530
+
1531
+ </p>
1532
+
1533
+
1534
+ </div>
1535
+
1536
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-tl">
1537
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-tl</code></h4>
1538
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-tl</span> <span class="token punctuation">{</span>
1539
+ <span class="token property">background-position</span><span class="token punctuation">:</span> top left<span class="token punctuation">;</span>
1540
+ <span class="token punctuation">}</span></pre>
1541
+ </div>
1542
+ <div class="ml-3">
1543
+ <p class="p">
1544
+
1545
+ </p>
1546
+
1547
+
1548
+ </div>
1549
+
1550
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-br">
1551
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-br</code></h4>
1552
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-br</span> <span class="token punctuation">{</span>
1553
+ <span class="token property">background-position</span><span class="token punctuation">:</span> bottom right<span class="token punctuation">;</span>
1554
+ <span class="token punctuation">}</span></pre>
1555
+ </div>
1556
+ <div class="ml-3">
1557
+ <p class="p">
1558
+
1559
+ </p>
1560
+
1561
+
1562
+ </div>
1563
+
1564
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-bl">
1565
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-bl</code></h4>
1566
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-bl</span> <span class="token punctuation">{</span>
1567
+ <span class="token property">background-position</span><span class="token punctuation">:</span> bottom left<span class="token punctuation">;</span>
1568
+ <span class="token punctuation">}</span></pre>
1569
+ </div>
1570
+ <div class="ml-3">
1571
+ <p class="p">
1572
+
1573
+ </p>
1574
+
1575
+
1576
+ </div>
1577
+
1578
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-cr">
1579
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-cr</code></h4>
1580
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-cr</span> <span class="token punctuation">{</span>
1581
+ <span class="token property">background-position</span><span class="token punctuation">:</span> center right<span class="token punctuation">;</span>
1582
+ <span class="token punctuation">}</span></pre>
1583
+ </div>
1584
+ <div class="ml-3">
1585
+ <p class="p">
1586
+
1587
+ </p>
1588
+
1589
+
1590
+ </div>
1591
+
1592
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-cl">
1593
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-cl</code></h4>
1594
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-cl</span> <span class="token punctuation">{</span>
1595
+ <span class="token property">background-position</span><span class="token punctuation">:</span> center left<span class="token punctuation">;</span>
1596
+ <span class="token punctuation">}</span></pre>
1597
+ </div>
1598
+ <div class="ml-3">
1599
+ <p class="p">
1600
+
1601
+ </p>
1602
+
1603
+
1604
+ </div>
1605
+
1606
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-ct">
1607
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-ct</code></h4>
1608
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-ct</span> <span class="token punctuation">{</span>
1609
+ <span class="token property">background-position</span><span class="token punctuation">:</span> center top<span class="token punctuation">;</span>
1610
+ <span class="token punctuation">}</span></pre>
1611
+ </div>
1612
+ <div class="ml-3">
1613
+ <p class="p">
1614
+
1615
+ </p>
1616
+
1617
+
1618
+ </div>
1619
+
1620
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgp-cb">
1621
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgp-cb</code></h4>
1622
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgp-cb</span> <span class="token punctuation">{</span>
1623
+ <span class="token property">background-position</span><span class="token punctuation">:</span> center bottom<span class="token punctuation">;</span>
1624
+ <span class="token punctuation">}</span></pre>
1625
+ </div>
1626
+ <div class="ml-3">
1627
+ <p class="p">
1628
+
1629
+ </p>
1630
+
1631
+
1632
+ </div>
1633
+
1634
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgr">
1635
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgr</code></h4>
1636
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgr</span> <span class="token punctuation">{</span>
1637
+ <span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat<span class="token punctuation">;</span>
1638
+ <span class="token punctuation">}</span></pre>
1639
+ </div>
1640
+ <div class="ml-3">
1641
+ <p class="p">
1642
+
1643
+ </p>
1644
+
1645
+
1646
+ </div>
1647
+
1648
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgr-x">
1649
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgr-x</code></h4>
1650
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgr-x</span> <span class="token punctuation">{</span>
1651
+ <span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat-x<span class="token punctuation">;</span>
1652
+ <span class="token punctuation">}</span></pre>
1653
+ </div>
1654
+ <div class="ml-3">
1655
+ <p class="p">
1656
+
1657
+ </p>
1658
+
1659
+
1660
+ </div>
1661
+
1662
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgr-y">
1663
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgr-y</code></h4>
1664
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgr-y</span> <span class="token punctuation">{</span>
1665
+ <span class="token property">background-repeat</span><span class="token punctuation">:</span> repeat-y<span class="token punctuation">;</span>
1666
+ <span class="token punctuation">}</span></pre>
1667
+ </div>
1668
+ <div class="ml-3">
1669
+ <p class="p">
1670
+
1671
+ </p>
1672
+
1673
+
1674
+ </div>
1675
+
1676
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgr-s">
1677
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgr-s</code></h4>
1678
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgr-s</span> <span class="token punctuation">{</span>
1679
+ <span class="token property">background-repeat</span><span class="token punctuation">:</span> space<span class="token punctuation">;</span>
1680
+ <span class="token punctuation">}</span></pre>
1681
+ </div>
1682
+ <div class="ml-3">
1683
+ <p class="p">
1684
+
1685
+ </p>
1686
+
1687
+
1688
+ </div>
1689
+
1690
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bgr-r">
1691
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bgr-r</code></h4>
1692
+ <pre class="f-3 highlighted-code"><span class="token selector">.bgr-r</span> <span class="token punctuation">{</span>
1693
+ <span class="token property">background-repeat</span><span class="token punctuation">:</span> round<span class="token punctuation">;</span>
1694
+ <span class="token punctuation">}</span></pre>
1695
+ </div>
1696
+ <div class="ml-3">
1697
+ <p class="p">
1698
+
1699
+ </p>
1700
+
1701
+
1702
+ </div>
1703
+
1704
+ <div class="mt-4 flex gap-3 items-center justify-between" id="bg-none">
1705
+ <h4 class="f-4 fw-3 ws-nowrap"><code>.bg-none</code></h4>
1706
+ <pre class="f-3 highlighted-code"><span class="token selector">.bg-none</span> <span class="token punctuation">{</span>
1707
+ <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
1708
+ <span class="token punctuation">}</span></pre>
1709
+ </div>
1710
+ <div class="ml-3">
1711
+ <p class="p">
1712
+
1713
+ </p>
1714
+
1715
+
1716
+ </div>
1717
+
1718
+
1719
+ </article>
1720
+ <div class="z-5 ma-0 overflow-y-auto pa-2 w-20 h-100 pos-absolute top-0 right-2">
1721
+ <div class="pa-3 ba bc-gray-700 bg-gray-900 br-3 shadow-1 ridiculous-liquid-glass-is-all-the-rage">
1722
+ <h3>On this Page</h3>
1723
+ <ul class="lst-none ma-0 pa-0">
1724
+
1725
+ <li class="lh-copy"><a href="#class-scale:z-index">Z Index</a></li>
1726
+
1727
+ <li class="lh-copy"><a href="#class-group:vertical-align">Vertical Align</a></li>
1728
+
1729
+ <li class="lh-copy"><a href="#class-group:position">Position</a></li>
1730
+
1731
+ <li class="lh-copy"><a href="#class-scale:top-left-right-bottom">Top/Left/Right/Bottom</a></li>
1732
+
1733
+ <li class="lh-copy"><a href="#class-group:floats">Floats</a></li>
1734
+
1735
+ <li class="lh-copy"><a href="#class-group:background-position">Background Position</a></li>
1736
+
1737
+ </ul>
1738
+ </div>
1739
+ </div>
1740
+ </div>
1741
+ <footer class="bg-black white mt-auto">
1742
+ <p class="tc">
1743
+ Copyright &copy; 2025 David Bryant Copeland.
1744
+ </p>
1745
+ </footer>
1746
+ </section>
1747
+ </main>
1748
+ </body>
1749
+
1750
+ </html>
1751
+