├── .gitignore
├── README.md
├── bin
    ├── build-cli.js
    ├── build.js
    ├── loader.js
    └── server.js
├── package-lock.json
├── package.json
├── src
    ├── components
    │   ├── css-module.js
    │   ├── esbuild-module.js
    │   └── markdown-module.js
    ├── example-setup.js
    ├── fonts
    │   ├── FiraMono-Regular.woff2
    │   ├── Inter-Black.woff2
    │   └── Inter-Light.woff2
    ├── images
    │   └── logo.svg
    ├── index.js
    ├── markdown
    │   ├── components
    │   │   ├── accordion.md
    │   │   ├── badge.md
    │   │   ├── button.md
    │   │   ├── chart.md
    │   │   ├── checkbox.md
    │   │   ├── dialog.md
    │   │   ├── form.md
    │   │   ├── icon.md
    │   │   ├── input.md
    │   │   ├── loader.md
    │   │   ├── panel.md
    │   │   ├── popover.md
    │   │   ├── profile-image.md
    │   │   ├── progress-bar.md
    │   │   ├── range.md
    │   │   ├── relative-time.md
    │   │   ├── router.md
    │   │   ├── select.md
    │   │   ├── split.md
    │   │   ├── sprite.md
    │   │   ├── tabs.md
    │   │   ├── textarea.md
    │   │   ├── toaster-inline.md
    │   │   ├── toaster.md
    │   │   ├── toggle.md
    │   │   ├── tooltip.md
    │   │   └── windowed.md
    │   └── guides
    │   │   ├── composition.md
    │   │   ├── csp.md
    │   │   ├── events.md
    │   │   ├── gettingstarted.md
    │   │   ├── intro.md
    │   │   ├── methods.md
    │   │   ├── props.md
    │   │   ├── ssr.md
    │   │   ├── state.md
    │   │   └── styles.md
    ├── pages
    │   ├── examples.js
    │   ├── index.js
    │   └── mixins
    │   │   ├── head.js
    │   │   └── logo.js
    └── styles
    │   ├── examples.css
    │   ├── highlight.js.css
    │   ├── index.css
    │   └── theme.css
└── website.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build/*.js
3 | build/*.html
4 | build/*
5 | build-output.txt
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![tonic](https://raw.githubusercontent.com/heapwolf/tonic/master/readme-tonic.png)
 2 | 
 3 | <p align="center">
 4 |   <b>Documentation</b>
 5 |   <br/>
 6 |   https://tonicframework.dev
 7 | </p>
 8 | <br/>
 9 | <br/>
10 | 


--------------------------------------------------------------------------------
/bin/build-cli.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | // @ts-check
 3 | 
 4 | import minimist from 'minimist'
 5 | import { build } from './build.js'
 6 | 
 7 | function main() {
 8 |   console.log('build now')
 9 |   return build(minimist(process.argv.slice(2)))
10 | }
11 | 
12 | main().then(() => {
13 |   process.exit(0)
14 | }).catch(err => {
15 |   console.error(err)
16 |   process.exit(1)
17 | })
18 | 


--------------------------------------------------------------------------------
/bin/build.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | 
 3 | import fs from 'node:fs/promises'
 4 | import path from 'node:path'
 5 | import Tonic from 'tonic-ssr'
 6 | 
 7 | const dirname = meta => path.dirname(new URL(meta.url).pathname)
 8 | const componentsDir = path.join(dirname(import.meta), '../src/components')
 9 | 
10 | const load = async src => {
11 |   const mod = await import(`${src}?t=${Date.now()}`)
12 |   return Tonic.add(mod.default)
13 | }
14 | 
15 | const compile = async (src, dest) => {
16 |   const p = path.resolve(src)
17 |   const t = new Date()
18 | 
19 |   t.setMinutes(t.getMinutes() - 1)
20 |   if ((await fs.stat(src)).mtime > t) return Promise.resolve()
21 | 
22 |   const Page = await load(p)
23 |   const page = new Page()
24 | 
25 |   try { await fs.mkdir(path.dirname(dest), { recursive: true }) } catch {}
26 |   const r = fs.writeFile(dest, await page.preRender())
27 |   return r
28 | }
29 | 
30 | export async function build (argv) {
31 |   console.log('export build')
32 |   const base = path.join(dirname(import.meta), '..')
33 | 
34 |   const dest = typeof argv.out === 'string'
35 |     ? argv.out : path.join(base, 'build')
36 | 
37 |   //
38 |   // clean and recreate the build directory if it exists
39 |   try {
40 |     await fs.rm(dest, { force: true, recursive: true })
41 |     await fs.mkdir(dest)
42 | 
43 |     //
44 |     // add symbolic links to the source fonts and images
45 |     //
46 |     for (const dir of ['fonts', 'images', 'styles']) {
47 |       try {
48 |         await fs.symlink(
49 |           path.join(base, 'src', dir),
50 |           path.join(dest, dir)
51 |         )
52 |       } catch (err) {
53 |         console.error('Could not create symlink', err)
54 |       }
55 |     }
56 |   } catch {}
57 | 
58 |   console.log('call load()')
59 | 
60 |   //
61 |   // decide which urls we want to build
62 |   //
63 |   await Promise.all([
64 |     load(path.join(componentsDir, 'css-module.js')),
65 |     load(path.join(componentsDir, 'esbuild-module.js')),
66 |     load(path.join(componentsDir, 'markdown-module.js'))
67 |   ])
68 | 
69 |   console.log('compile pages()')
70 | 
71 |   const pages = Promise.all([
72 |     compile('src/pages/index.js', `${dest}/index.html`),
73 |     compile('src/pages/examples.js', `${dest}/examples.html`)
74 |   ])
75 | 
76 |   await pages
77 | }
78 | 


--------------------------------------------------------------------------------
/bin/loader.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | // @ts-check
 4 | 
 5 | //
 6 | // Local servers aren't concurrent. So a cheap, fast and stable way to
 7 | // achieve hot-reloading is to restart the server after each request cycle,
 8 | // you end up with a lambda-like provider.
 9 | //
10 | import { spawn } from 'child_process'
11 | 
12 | let childProc
13 | let shutdown
14 | 
15 | const start = () => {
16 |   childProc = spawn('node', ['bin/server'])
17 | 
18 |   childProc.stdout.on('data', data => process.stdout.write(data.toString()))
19 |   childProc.stderr.on('data', data => process.stderr.write(data.toString()))
20 |   childProc.on('close', (code) => {
21 |     if (code && code !== 0) {
22 |       process.exit(code)
23 |     }
24 | 
25 |     if (!shutdown) {
26 |       start()
27 |     }
28 |   })
29 | }
30 | 
31 | start()
32 | 
33 | process.on('SIGTERM', () => {
34 |   shutdown = true
35 | 
36 |   if (childProc) {
37 |     childProc.kill()
38 |   }
39 | })
40 | 


--------------------------------------------------------------------------------
/bin/server.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | // @ts-check
 3 | 
 4 | import http from 'node:http'
 5 | import send from '@pre-bundled/send'
 6 | import minimist from 'minimist'
 7 | 
 8 | import { build } from './build.js'
 9 | 
10 | process.on('unhandledRejection', (err) => {
11 |   process.nextTick(() => {
12 |     throw err
13 |   })
14 | })
15 | 
16 | let die = null
17 | let port = 8081
18 | let url = 'http://dev.socketsupply.co'
19 | 
20 | const opts = { root: new URL('../build', import.meta.url).pathname }
21 | 
22 | const PENDING_REQUESTS = new Set()
23 | 
24 | async function handler (req, res) {
25 |   PENDING_REQUESTS.add(req)
26 | 
27 |   res.setMaxListeners(50)
28 |   res.on('finish', function _onFinishDelete () {
29 |     PENDING_REQUESTS.delete(req)
30 |   })
31 | 
32 |   const { pathname } = new URL(req.url, `${url}:${port}`)
33 | 
34 |   const onError = err => {
35 |     console.log('Got an error', err)
36 | 
37 |     if (err.status === 404) {
38 |       req.url = '/'
39 |       handler(req, res)
40 |     } else {
41 |       res.statusCode = err.status || 500
42 |       res.end('Internal Server Error')
43 |     }
44 |   }
45 | 
46 |   return send(req, pathname, opts)
47 |     .once('error', onError)
48 |     .on('end', () => {
49 |       clearTimeout(die)
50 |       die = setTimeout(teardown, 512)
51 |     })
52 |     .pipe(res)
53 | }
54 | 
55 | async function teardown () {
56 |   if (PENDING_REQUESTS.size > 0) {
57 |     clearTimeout(die)
58 |     die = setTimeout(teardown, 512)
59 |     return
60 |   }
61 | 
62 |   process.exit(0)
63 | }
64 | 
65 | async function main (argv) {
66 |   port = process.env.PORT
67 |     ? parseInt(process.env.PORT)
68 |     : argv.p || port
69 | 
70 |   if (argv.url) url = argv.url
71 | 
72 |   await build(argv)
73 |   http.createServer(handler).listen(port, async () => {
74 |     console.log(`listening on ${url}:${port}`)
75 |   })
76 | }
77 | 
78 | main(minimist(process.argv.slice(2)))
79 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "tonic-docs",
  3 |   "version": "1.0.0",
  4 |   "lockfileVersion": 2,
  5 |   "requires": true,
  6 |   "packages": {
  7 |     "": {
  8 |       "name": "tonic-docs",
  9 |       "version": "1.0.0",
 10 |       "license": "ISC",
 11 |       "dependencies": {
 12 |         "@socketsupply/components": "13.2.5",
 13 |         "@socketsupply/tonic": "14.1.1",
 14 |         "chart.js": "^2.9.4",
 15 |         "highlight.js": "^11.4.0",
 16 |         "minimist": "^1.2.5",
 17 |         "node-fetch": "^3.2.0"
 18 |       },
 19 |       "devDependencies": {
 20 |         "@pre-bundled/send": "^0.16.2-patch-1",
 21 |         "@types/node": "17.0.21",
 22 |         "clean-css": "^4.2.3",
 23 |         "esbuild": "^0.8.36",
 24 |         "marked": "^4.0.10",
 25 |         "tonic-ssr": "^1.1.0"
 26 |       }
 27 |     },
 28 |     "node_modules/@optoolco/tonic": {
 29 |       "version": "13.3.0",
 30 |       "resolved": "https://registry.npmjs.org/@optoolco/tonic/-/tonic-13.3.0.tgz",
 31 |       "integrity": "sha512-2EADB1CGpiMsEPJuPOnIXIwGJv5phjJ3HPyKxlNdVCYan1CPKvO6fSH64w2jn5zmbEH15MCHc/Be3rqBQrBn3Q==",
 32 |       "dev": true
 33 |     },
 34 |     "node_modules/@pre-bundled/send": {
 35 |       "version": "0.16.2-patch-1",
 36 |       "resolved": "https://registry.npmjs.org/@pre-bundled/send/-/send-0.16.2-patch-1.tgz",
 37 |       "integrity": "sha512-iPiTUhb4zUmrjLPWXo0SQeixIah4fMHvmuU7IFyNr2FWDspIpSQYgEMMpa+CNSmF5iI5yEodBIlXr1+4LZ8r1g==",
 38 |       "dev": true,
 39 |       "engines": {
 40 |         "node": ">= 0.8.0"
 41 |       }
 42 |     },
 43 |     "node_modules/@socketsupply/components": {
 44 |       "version": "13.2.5",
 45 |       "resolved": "https://registry.npmjs.org/@socketsupply/components/-/components-13.2.5.tgz",
 46 |       "integrity": "sha512-qEf367hi0Tp9EtnWViBQeyzA4o56PI2u43tUr9CM+1W/HkFTgYa+VFuy1Jr62YCprYdOO9SFcvsNU1BzztGqBw=="
 47 |     },
 48 |     "node_modules/@socketsupply/tonic": {
 49 |       "version": "14.1.1",
 50 |       "resolved": "https://registry.npmjs.org/@socketsupply/tonic/-/tonic-14.1.1.tgz",
 51 |       "integrity": "sha512-84plLg5I7EyZiK6BCJMp/7lgptxZZ9XF+LgxufWHzptDK1judbAP2D2klCr265W95AKwPHIIbs7hcYxP+I+d0w=="
 52 |     },
 53 |     "node_modules/@types/node": {
 54 |       "version": "17.0.21",
 55 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
 56 |       "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
 57 |       "dev": true
 58 |     },
 59 |     "node_modules/chart.js": {
 60 |       "version": "2.9.4",
 61 |       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
 62 |       "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
 63 |       "dependencies": {
 64 |         "chartjs-color": "^2.1.0",
 65 |         "moment": "^2.10.2"
 66 |       }
 67 |     },
 68 |     "node_modules/chartjs-color": {
 69 |       "version": "2.4.1",
 70 |       "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
 71 |       "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
 72 |       "dependencies": {
 73 |         "chartjs-color-string": "^0.6.0",
 74 |         "color-convert": "^1.9.3"
 75 |       }
 76 |     },
 77 |     "node_modules/chartjs-color-string": {
 78 |       "version": "0.6.0",
 79 |       "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
 80 |       "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
 81 |       "dependencies": {
 82 |         "color-name": "^1.0.0"
 83 |       }
 84 |     },
 85 |     "node_modules/clean-css": {
 86 |       "version": "4.2.3",
 87 |       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
 88 |       "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
 89 |       "dev": true,
 90 |       "dependencies": {
 91 |         "source-map": "~0.6.0"
 92 |       },
 93 |       "engines": {
 94 |         "node": ">= 4.0"
 95 |       }
 96 |     },
 97 |     "node_modules/color-convert": {
 98 |       "version": "1.9.3",
 99 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
100 |       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
101 |       "dependencies": {
102 |         "color-name": "1.1.3"
103 |       }
104 |     },
105 |     "node_modules/color-convert/node_modules/color-name": {
106 |       "version": "1.1.3",
107 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
108 |       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
109 |     },
110 |     "node_modules/color-name": {
111 |       "version": "1.1.4",
112 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
113 |       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
114 |     },
115 |     "node_modules/data-uri-to-buffer": {
116 |       "version": "4.0.0",
117 |       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
118 |       "integrity": "sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==",
119 |       "engines": {
120 |         "node": ">= 12"
121 |       }
122 |     },
123 |     "node_modules/esbuild": {
124 |       "version": "0.8.36",
125 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.36.tgz",
126 |       "integrity": "sha512-kcUQB61Tf8rLJ3mOwP2ruWi/iFufaQcEs4No+JA6e7W2kMOtFExOsbyeFpEF6zNacwk2RF5fYUz5jfZwgn/SJg==",
127 |       "dev": true,
128 |       "hasInstallScript": true,
129 |       "bin": {
130 |         "esbuild": "bin/esbuild"
131 |       }
132 |     },
133 |     "node_modules/fetch-blob": {
134 |       "version": "3.1.4",
135 |       "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.1.4.tgz",
136 |       "integrity": "sha512-Eq5Xv5+VlSrYWEqKrusxY1C3Hm/hjeAsCGVG3ft7pZahlUAChpGZT/Ms1WmSLnEAisEXszjzu/s+ce6HZB2VHA==",
137 |       "funding": [
138 |         {
139 |           "type": "github",
140 |           "url": "https://github.com/sponsors/jimmywarting"
141 |         },
142 |         {
143 |           "type": "paypal",
144 |           "url": "https://paypal.me/jimmywarting"
145 |         }
146 |       ],
147 |       "dependencies": {
148 |         "node-domexception": "^1.0.0",
149 |         "web-streams-polyfill": "^3.0.3"
150 |       },
151 |       "engines": {
152 |         "node": "^12.20 || >= 14.13"
153 |       }
154 |     },
155 |     "node_modules/formdata-polyfill": {
156 |       "version": "4.0.10",
157 |       "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
158 |       "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
159 |       "dependencies": {
160 |         "fetch-blob": "^3.1.2"
161 |       },
162 |       "engines": {
163 |         "node": ">=12.20.0"
164 |       }
165 |     },
166 |     "node_modules/highlight.js": {
167 |       "version": "11.4.0",
168 |       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.4.0.tgz",
169 |       "integrity": "sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA==",
170 |       "engines": {
171 |         "node": ">=12.0.0"
172 |       }
173 |     },
174 |     "node_modules/marked": {
175 |       "version": "4.0.10",
176 |       "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.10.tgz",
177 |       "integrity": "sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw==",
178 |       "dev": true,
179 |       "bin": {
180 |         "marked": "bin/marked.js"
181 |       },
182 |       "engines": {
183 |         "node": ">= 12"
184 |       }
185 |     },
186 |     "node_modules/minimist": {
187 |       "version": "1.2.5",
188 |       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
189 |       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
190 |     },
191 |     "node_modules/moment": {
192 |       "version": "2.29.1",
193 |       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
194 |       "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
195 |       "engines": {
196 |         "node": "*"
197 |       }
198 |     },
199 |     "node_modules/node-domexception": {
200 |       "version": "1.0.0",
201 |       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
202 |       "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
203 |       "funding": [
204 |         {
205 |           "type": "github",
206 |           "url": "https://github.com/sponsors/jimmywarting"
207 |         },
208 |         {
209 |           "type": "github",
210 |           "url": "https://paypal.me/jimmywarting"
211 |         }
212 |       ],
213 |       "engines": {
214 |         "node": ">=10.5.0"
215 |       }
216 |     },
217 |     "node_modules/node-fetch": {
218 |       "version": "3.2.0",
219 |       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.0.tgz",
220 |       "integrity": "sha512-8xeimMwMItMw8hRrOl3C9/xzU49HV/yE6ORew/l+dxWimO5A4Ra8ld2rerlJvc/O7et5Z1zrWsPX43v1QBjCxw==",
221 |       "dependencies": {
222 |         "data-uri-to-buffer": "^4.0.0",
223 |         "fetch-blob": "^3.1.4",
224 |         "formdata-polyfill": "^4.0.10"
225 |       },
226 |       "engines": {
227 |         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
228 |       },
229 |       "funding": {
230 |         "type": "opencollective",
231 |         "url": "https://opencollective.com/node-fetch"
232 |       }
233 |     },
234 |     "node_modules/parse5": {
235 |       "version": "6.0.1",
236 |       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
237 |       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
238 |       "dev": true
239 |     },
240 |     "node_modules/source-map": {
241 |       "version": "0.6.1",
242 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
243 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
244 |       "dev": true,
245 |       "engines": {
246 |         "node": ">=0.10.0"
247 |       }
248 |     },
249 |     "node_modules/tonic-ssr": {
250 |       "version": "1.1.0",
251 |       "resolved": "https://registry.npmjs.org/tonic-ssr/-/tonic-ssr-1.1.0.tgz",
252 |       "integrity": "sha512-skamfiBlEM818YkWxT1pQf5G8kEP8qDaWX4Ee5p+6IWq5B6LQtnKO2BghnmoGcBvLOVMZMpfsfwl9RIFxLBUig==",
253 |       "dev": true,
254 |       "dependencies": {
255 |         "@optoolco/tonic": "^13.1.4",
256 |         "parse5": "^6.0.1"
257 |       }
258 |     },
259 |     "node_modules/web-streams-polyfill": {
260 |       "version": "3.2.0",
261 |       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz",
262 |       "integrity": "sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==",
263 |       "engines": {
264 |         "node": ">= 8"
265 |       }
266 |     }
267 |   },
268 |   "dependencies": {
269 |     "@optoolco/tonic": {
270 |       "version": "13.3.0",
271 |       "resolved": "https://registry.npmjs.org/@optoolco/tonic/-/tonic-13.3.0.tgz",
272 |       "integrity": "sha512-2EADB1CGpiMsEPJuPOnIXIwGJv5phjJ3HPyKxlNdVCYan1CPKvO6fSH64w2jn5zmbEH15MCHc/Be3rqBQrBn3Q==",
273 |       "dev": true
274 |     },
275 |     "@pre-bundled/send": {
276 |       "version": "0.16.2-patch-1",
277 |       "resolved": "https://registry.npmjs.org/@pre-bundled/send/-/send-0.16.2-patch-1.tgz",
278 |       "integrity": "sha512-iPiTUhb4zUmrjLPWXo0SQeixIah4fMHvmuU7IFyNr2FWDspIpSQYgEMMpa+CNSmF5iI5yEodBIlXr1+4LZ8r1g==",
279 |       "dev": true
280 |     },
281 |     "@socketsupply/components": {
282 |       "version": "13.2.5",
283 |       "resolved": "https://registry.npmjs.org/@socketsupply/components/-/components-13.2.5.tgz",
284 |       "integrity": "sha512-qEf367hi0Tp9EtnWViBQeyzA4o56PI2u43tUr9CM+1W/HkFTgYa+VFuy1Jr62YCprYdOO9SFcvsNU1BzztGqBw=="
285 |     },
286 |     "@socketsupply/tonic": {
287 |       "version": "14.1.1",
288 |       "resolved": "https://registry.npmjs.org/@socketsupply/tonic/-/tonic-14.1.1.tgz",
289 |       "integrity": "sha512-84plLg5I7EyZiK6BCJMp/7lgptxZZ9XF+LgxufWHzptDK1judbAP2D2klCr265W95AKwPHIIbs7hcYxP+I+d0w=="
290 |     },
291 |     "@types/node": {
292 |       "version": "17.0.21",
293 |       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
294 |       "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
295 |       "dev": true
296 |     },
297 |     "chart.js": {
298 |       "version": "2.9.4",
299 |       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
300 |       "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
301 |       "requires": {
302 |         "chartjs-color": "^2.1.0",
303 |         "moment": "^2.10.2"
304 |       }
305 |     },
306 |     "chartjs-color": {
307 |       "version": "2.4.1",
308 |       "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
309 |       "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
310 |       "requires": {
311 |         "chartjs-color-string": "^0.6.0",
312 |         "color-convert": "^1.9.3"
313 |       }
314 |     },
315 |     "chartjs-color-string": {
316 |       "version": "0.6.0",
317 |       "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
318 |       "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
319 |       "requires": {
320 |         "color-name": "^1.0.0"
321 |       }
322 |     },
323 |     "clean-css": {
324 |       "version": "4.2.3",
325 |       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
326 |       "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
327 |       "dev": true,
328 |       "requires": {
329 |         "source-map": "~0.6.0"
330 |       }
331 |     },
332 |     "color-convert": {
333 |       "version": "1.9.3",
334 |       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
335 |       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
336 |       "requires": {
337 |         "color-name": "1.1.3"
338 |       },
339 |       "dependencies": {
340 |         "color-name": {
341 |           "version": "1.1.3",
342 |           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
343 |           "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
344 |         }
345 |       }
346 |     },
347 |     "color-name": {
348 |       "version": "1.1.4",
349 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
350 |       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
351 |     },
352 |     "data-uri-to-buffer": {
353 |       "version": "4.0.0",
354 |       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
355 |       "integrity": "sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA=="
356 |     },
357 |     "esbuild": {
358 |       "version": "0.8.36",
359 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.36.tgz",
360 |       "integrity": "sha512-kcUQB61Tf8rLJ3mOwP2ruWi/iFufaQcEs4No+JA6e7W2kMOtFExOsbyeFpEF6zNacwk2RF5fYUz5jfZwgn/SJg==",
361 |       "dev": true
362 |     },
363 |     "fetch-blob": {
364 |       "version": "3.1.4",
365 |       "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.1.4.tgz",
366 |       "integrity": "sha512-Eq5Xv5+VlSrYWEqKrusxY1C3Hm/hjeAsCGVG3ft7pZahlUAChpGZT/Ms1WmSLnEAisEXszjzu/s+ce6HZB2VHA==",
367 |       "requires": {
368 |         "node-domexception": "^1.0.0",
369 |         "web-streams-polyfill": "^3.0.3"
370 |       }
371 |     },
372 |     "formdata-polyfill": {
373 |       "version": "4.0.10",
374 |       "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
375 |       "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
376 |       "requires": {
377 |         "fetch-blob": "^3.1.2"
378 |       }
379 |     },
380 |     "highlight.js": {
381 |       "version": "11.4.0",
382 |       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.4.0.tgz",
383 |       "integrity": "sha512-nawlpCBCSASs7EdvZOYOYVkJpGmAOKMYZgZtUqSRqodZE0GRVcFKwo1RcpeOemqh9hyttTdd5wDBwHkuSyUfnA=="
384 |     },
385 |     "marked": {
386 |       "version": "4.0.10",
387 |       "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.10.tgz",
388 |       "integrity": "sha512-+QvuFj0nGgO970fySghXGmuw+Fd0gD2x3+MqCWLIPf5oxdv1Ka6b2q+z9RP01P/IaKPMEramy+7cNy/Lw8c3hw==",
389 |       "dev": true
390 |     },
391 |     "minimist": {
392 |       "version": "1.2.5",
393 |       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
394 |       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
395 |     },
396 |     "moment": {
397 |       "version": "2.29.1",
398 |       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
399 |       "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
400 |     },
401 |     "node-domexception": {
402 |       "version": "1.0.0",
403 |       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
404 |       "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ=="
405 |     },
406 |     "node-fetch": {
407 |       "version": "3.2.0",
408 |       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.2.0.tgz",
409 |       "integrity": "sha512-8xeimMwMItMw8hRrOl3C9/xzU49HV/yE6ORew/l+dxWimO5A4Ra8ld2rerlJvc/O7et5Z1zrWsPX43v1QBjCxw==",
410 |       "requires": {
411 |         "data-uri-to-buffer": "^4.0.0",
412 |         "fetch-blob": "^3.1.4",
413 |         "formdata-polyfill": "^4.0.10"
414 |       }
415 |     },
416 |     "parse5": {
417 |       "version": "6.0.1",
418 |       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
419 |       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
420 |       "dev": true
421 |     },
422 |     "source-map": {
423 |       "version": "0.6.1",
424 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
425 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
426 |       "dev": true
427 |     },
428 |     "tonic-ssr": {
429 |       "version": "1.1.0",
430 |       "resolved": "https://registry.npmjs.org/tonic-ssr/-/tonic-ssr-1.1.0.tgz",
431 |       "integrity": "sha512-skamfiBlEM818YkWxT1pQf5G8kEP8qDaWX4Ee5p+6IWq5B6LQtnKO2BghnmoGcBvLOVMZMpfsfwl9RIFxLBUig==",
432 |       "dev": true,
433 |       "requires": {
434 |         "@optoolco/tonic": "^13.1.4",
435 |         "parse5": "^6.0.1"
436 |       }
437 |     },
438 |     "web-streams-polyfill": {
439 |       "version": "3.2.0",
440 |       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz",
441 |       "integrity": "sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA=="
442 |     }
443 |   }
444 | }
445 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tonic-docs",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "src/index.server.js",
 6 |   "scripts": {
 7 |     "start": "./bin/loader.js",
 8 |     "build": "./bin/build-cli.js"
 9 |   },
10 |   "type": "module",
11 |   "author": "",
12 |   "license": "ISC",
13 |   "dependencies": {
14 |     "@socketsupply/components": "13.2.5",
15 |     "@socketsupply/tonic": "14.1.1",
16 |     "chart.js": "^2.9.4",
17 |     "highlight.js": "^11.4.0",
18 |     "minimist": "^1.2.5",
19 |     "node-fetch": "^3.2.0"
20 |   },
21 |   "devDependencies": {
22 |     "@pre-bundled/send": "^0.16.2-patch-1",
23 |     "@types/node": "17.0.21",
24 |     "clean-css": "^4.2.3",
25 |     "esbuild": "^0.8.36",
26 |     "marked": "^4.0.10",
27 |     "tonic-ssr": "^1.1.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/css-module.js:
--------------------------------------------------------------------------------
 1 | import fs from 'fs'
 2 | import path from 'path'
 3 | 
 4 | import Tonic from 'tonic-ssr'
 5 | import CleanCSS from 'clean-css'
 6 | 
 7 | const minifier = new CleanCSS({})
 8 | 
 9 | const closest = (node, fn) => {
10 |   while (node.parentNode) {
11 |     node = node.parentNode
12 |     if (fn(node)) return node
13 |   }
14 | }
15 | 
16 | export default class CssModule extends Tonic {
17 |   async render () {
18 |     const html = closest(this.node, n => n.tagName === 'html')
19 |     const body = closest(this.node, n => n.tagName === 'body')
20 | 
21 |     //
22 |     // We can remove nodes and create new ones in other
23 |     // branches of the tree at run-time.
24 |     //
25 |     const i = body.childNodes.findIndex(node => {
26 |       return node.tagName === 'css-module'
27 |     })
28 | 
29 |     body.childNodes.splice(i, 1)
30 | 
31 |     //
32 |     // Even change the tag at render-time!
33 |     //
34 |     this.node.tagName = 'style'
35 | 
36 |     const head = html.childNodes.find(node => node.tagName === 'head')
37 | 
38 |     if (head) {
39 |       this.node.attrs = {}
40 |       head.childNodes.push(this.node)
41 |     }
42 | 
43 |     try {
44 |       const location = path.resolve(this.props.src)
45 |       let s = await fs.promises.readFile(location, 'utf8')
46 | 
47 |       //
48 |       // make @import path("...") a compile time directive
49 |       //
50 |       s = s.replace(/@import path\("(.*)\"\);/g, (_, p) => {
51 |         const r = path.resolve(path.dirname(location), p)
52 | 
53 |         try {
54 |           return fs.readFileSync(r, 'utf8')
55 |         } catch (err) {
56 |           return `// Failed to import ${p}: ${err.message}`
57 |         }
58 |       })
59 | 
60 |       const result = minifier.minify(s)
61 | 
62 |       return this.html`${Tonic.unsafeRawString(result.styles)}`
63 |     } catch (err) {
64 |       return this.html`${err.message}`
65 |     }
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/components/esbuild-module.js:
--------------------------------------------------------------------------------
 1 | import esbuild from 'esbuild'
 2 | import Tonic from 'tonic-ssr'
 3 | 
 4 | export default class EsbuildModule extends Tonic {
 5 |   async render () {
 6 |     const {
 7 |       src,
 8 |       dest,
 9 |       url
10 |     } = this.props
11 | 
12 |     delete this.props.src
13 |     delete this.props.dest
14 |     delete this.props.url
15 | 
16 |     try {
17 |       await esbuild.build({
18 |         ...this.props,
19 |         entryPoints: [src],
20 |         bundle: true,
21 |         outfile: dest
22 |       })
23 | 
24 |       return this.html`
25 |         <script src="${url}"></script>
26 |       `
27 |     } catch (err) {
28 |       return this.html`
29 |         Unable to bundle (${err.message}).
30 |       `
31 |     }
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/markdown-module.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | import fs from 'node:fs/promises'
 4 | import path from 'node:path'
 5 | 
 6 | import fetch from 'node-fetch'
 7 | import Tonic from 'tonic-ssr'
 8 | import { marked } from 'marked'
 9 | import hl from 'highlight.js'
10 | 
11 | const renderer = new marked.Renderer()
12 | 
13 | const highlight = (code, lang = 'javascript', escaped) => {
14 |   if (!lang) lang = 'javascript'
15 |   return hl.highlight(code, { language: 'javascript', ignoreIllegals: true }).value
16 | }
17 | 
18 | marked.setOptions({
19 |   renderer,
20 |   highlight // doubles the build time
21 | })
22 | 
23 | export default class MarkdownModule extends Tonic {
24 |   async render () {
25 |     if (!this.props.src) {
26 |       const raw = this.node.childNodes[0].value
27 |       this.node.childNodes.length = 0
28 |       return Tonic.unsafeRawString(marked(raw))
29 |     }
30 | 
31 |     try {
32 |       let raw = ''
33 | 
34 |       if (this.props.src.startsWith('https://')) {
35 |         const last = Tonic.cache[this.props.src]
36 | 
37 |         if (last && (last.timestamp > Date.now() - 5e4)) {
38 |           return last.value
39 |         }
40 | 
41 |         const res = await fetch(this.props.src)
42 |         raw = await res.text()
43 | 
44 |         Tonic.cache[this.props.src] = {
45 |           timestamp: Date.now(),
46 |           value
47 |         }
48 | 
49 |       } else {
50 |         const src = path.resolve(this.props.src)
51 |         raw = await fs.readFile(src, 'utf8')
52 |       }
53 | 
54 |       const value = Tonic.unsafeRawString(marked(raw))
55 | 
56 |       return value
57 |     } catch (err) {
58 |       return this.html`
59 |         <div class="error">
60 |           Unable to read file ${this.props.src} (${err.message}).
61 |         </div>
62 |       `
63 |     }
64 |   }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/example-setup.js:
--------------------------------------------------------------------------------
  1 | //
  2 | // This file contains code that sets up some interactions
  3 | // for a few of the components on the example page.
  4 | //
  5 | import Tonic from '@socketsupply/tonic'
  6 | import { Windowed } from '@socketsupply/components/windowed'
  7 | 
  8 | export default () => {
  9 |   //
 10 |   // badge
 11 |   //
 12 |   const add = document.getElementById('add-notification')
 13 |   const subtract = document.getElementById('subtract-notification')
 14 |   const tonicBadge = document.querySelector('tonic-badge')
 15 | 
 16 |   add.addEventListener('click', (e) => {
 17 |     ++tonicBadge.state.count
 18 | 
 19 |     tonicBadge.reRender()
 20 |   })
 21 | 
 22 |   subtract.addEventListener('click', e => {
 23 |     let count = tonicBadge.state.count
 24 |     tonicBadge.state.count = count > 0 ? --count : count
 25 | 
 26 |     tonicBadge.reRender()
 27 |   })
 28 | 
 29 |   //
 30 |   // button
 31 |   //
 32 |   const buttons = [...document.querySelectorAll('.tonic-button-example')]
 33 | 
 34 |   for (const button of buttons) {
 35 |     button.addEventListener('click', e => {
 36 |       clearTimeout(button.timeout)
 37 |       button.timeout = setTimeout(() => {
 38 |         button.loading(false)
 39 |       }, 3e3)
 40 |     })
 41 |   }
 42 | 
 43 |   //
 44 |   // chart
 45 |   //
 46 |   const chart = document.querySelector('tonic-chart')
 47 |   chart.library = require('chart.js')
 48 |   chart.redraw()
 49 | 
 50 |   //
 51 |   // dialog
 52 |   //
 53 |   class ShowRandom extends Tonic {
 54 |     async click (e) {
 55 |       if (Tonic.match(e.target, '#update')) {
 56 |         this.state.message = String(Math.random())
 57 |         this.reRender()
 58 |       }
 59 |     }
 60 | 
 61 |     render () {
 62 |       return this.html`
 63 |         <header>Dialog</header>
 64 | 
 65 |         <main>
 66 |           ${this.state.message || 'Ready'}
 67 |         </main>
 68 | 
 69 |         <footer>
 70 |           <tonic-button id="update">Update</tonic-button>
 71 |         </footer>
 72 |       `
 73 |     }
 74 |   }
 75 | 
 76 |   Tonic.add(ShowRandom)
 77 | 
 78 |   const link = document.getElementById('example-dialog-link')
 79 |   const dialog = document.getElementById('example-dialog')
 80 | 
 81 |   link.addEventListener('click', async e => {
 82 |     await dialog.reRender()
 83 |     await dialog.show()
 84 |   })
 85 | 
 86 |   //
 87 |   // form
 88 |   //
 89 |   const form = document.getElementById('form-example')
 90 |   const button = document.getElementById('form-submit')
 91 | 
 92 |   form.addEventListener('input', e => {
 93 |     button.disabled = !form.validate()
 94 |   })
 95 | 
 96 |   form.addEventListener('change', e => {
 97 |     button.disabled = !form.validate()
 98 |   })
 99 | 
100 |   //
101 |   // input
102 |   //
103 |   const input = document.getElementById('tonic-input-example')
104 |   const span = document.getElementById('tonic-input-state')
105 | 
106 |   const listener = e => {
107 |     const state = input.state
108 |     span.textContent = `Value: "${state.value || 'Empty'}", Focus: ${state.focus}`
109 |   }
110 | 
111 |   input.addEventListener('input', listener)
112 |   input.addEventListener('blur', listener)
113 |   input.addEventListener('focus', listener)
114 | 
115 |   //
116 |   // panel
117 |   //
118 |   class ReadWikipedia extends Tonic {
119 |     async getArticle (title) {
120 |       try {
121 |         const res = await window.fetch(`https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles=${title}&origin=*`)
122 |         return Object.values((await res.json()).query.pages)[0]
123 |       } catch (err) {
124 |         return { title: 'Error', extract: err.message }
125 |       }
126 |     }
127 | 
128 |     async click (e) {
129 |       if (e.target.value === 'close') {
130 |         return this.parentElement.hide()
131 |       }
132 | 
133 |       if (e.target.value === 'get') {
134 |         const page = await this.getArticle('HTML')
135 | 
136 |         this.reRender(props => ({
137 |           ...props,
138 |           ...page
139 |         }))
140 |       }
141 |     }
142 | 
143 |     async * render () {
144 |       const title = this.props.title || 'Hello'
145 |       const content = this.props.extract
146 |         ? this.props.extract
147 |         : 'Click "get" to fetch the content from Wikipedia.'
148 | 
149 |       return this.html`
150 |         <header>Panel Example</header>
151 |         <main>
152 |           <h3>${title}</h3>
153 |           <p>${content}</p>
154 |         </main>
155 |         <footer>
156 |           <tonic-button value="close">Close</tonic-button>
157 |           <tonic-button value="get" async="true">Get</tonic-button>
158 |         </main>
159 |       `
160 |     }
161 |   }
162 | 
163 |   Tonic.add(ReadWikipedia)
164 | 
165 |   const panelLink = document.getElementById('content-panel-link-example')
166 |   const panel = document.getElementById('tonic-panel-example')
167 | 
168 |   panelLink.addEventListener('click', e => panel.show())
169 | 
170 |   //
171 |   // profile-image
172 |   //
173 |   const profile = document.getElementById('profile-image-example-editable')
174 | 
175 |   profile.addEventListener('change', e => console.log(e.data))
176 |   profile.addEventListener('error', e => console.log(e.message))
177 | 
178 |   //
179 |   // progress-bar
180 |   //
181 |   let percentage = 0
182 |   let interval = null
183 | 
184 |   const progressBar = document.getElementById('progress-bar-example')
185 | 
186 |   document.getElementById('start-progress').addEventListener('click', e => {
187 |     clearInterval(interval)
188 |     interval = setInterval(() => {
189 |       progressBar.setProgress(percentage++)
190 |       if (progressBar.value >= 100) percentage = 0
191 |     }, 128)
192 |   })
193 | 
194 |   document.getElementById('stop-progress').addEventListener('click', e => {
195 |     clearInterval(interval)
196 |   })
197 | 
198 |   //
199 |   // router
200 |   //
201 |   const selectRoute = document.getElementById('tonic-router-select')
202 |   const page2 = document.getElementById('page2')
203 | 
204 |   selectRoute.addEventListener('change', e => {
205 |     window.history.pushState({}, '', selectRoute.value)
206 |   })
207 | 
208 |   page2.addEventListener('match', () => {
209 |     const { number } = page2.state
210 |     const el = document.getElementById('page2-number')
211 |     el.textContent = number
212 |   })
213 | 
214 |   //
215 |   // select
216 |   //
217 |   const select = document.getElementById('options-example-1')
218 |   const notification = document.getElementsByTagName('tonic-toaster')[0]
219 | 
220 |   select.addEventListener('change', ({ target }) => {
221 |     if (select.value === 'c') {
222 |       select.setInvalid('Bad choice')
223 |     } else {
224 |       select.setValid()
225 |     }
226 | 
227 |     notification.create({
228 |       type: 'success',
229 |       message: `Selected option was "${select.value}".`,
230 |       title: 'Selection',
231 |       duration: 2000
232 |     })
233 |   })
234 | 
235 |   //
236 |   // toaster-inline
237 |   //
238 |   const toaster1 = document.getElementById('toaster-1')
239 |   const toasterLink1 = document.getElementById('toaster-link-1')
240 | 
241 |   toasterLink1.addEventListener('click', e => toaster1.show())
242 | 
243 |   //
244 |   // toaster
245 |   //
246 |   const notificationContainer = document.querySelector('tonic-toaster')
247 | 
248 |   document
249 |     .getElementById('tonic-toaster-example')
250 |     .addEventListener('click', e => notificationContainer.create({
251 |       type: 'success',
252 |       title: 'Greetings',
253 |       message: 'Hello, World'
254 |     }))
255 | 
256 |   //
257 |   // windowed
258 |   //
259 |   class ExampleWindowed extends Windowed {
260 |     async click (e) {
261 |       const row = Tonic.match(e.target, '[data-id]')
262 | 
263 |       if (row) {
264 |         console.log(await this.getRow(+row.dataset.id))
265 |       }
266 |     }
267 | 
268 |     //
269 |     // Reuses the same DOM structure
270 |     //
271 |     updateRow (row, index, element) {
272 |       element.children[0].textContent = row.title
273 |       element.children[1].textContent = row.date
274 |       element.children[2].textContent = row.random
275 |     }
276 | 
277 |     //
278 |     // Creates a new DOM structure
279 |     //
280 |     renderRow (row, index) {
281 |       return this.html`
282 |         <div class="tr" data-id="${row.id}">
283 |           <div class="td">${row.title}</div>
284 |           <div class="td">${row.date}</div>
285 |           <div class="td">${row.random}</div>
286 |         </div>
287 |       `
288 |     }
289 | 
290 |     render () {
291 |       return this.html`
292 |         <div class="th">
293 |           <div class="td">Title</div>
294 |           <div class="td">Date</div>
295 |           <div class="td">Random</div>
296 |         </div>
297 |         ${super.render()}
298 |       `
299 |     }
300 |   }
301 | 
302 |   Tonic.add(ExampleWindowed)
303 | 
304 |   //
305 |   // This demo generates the data after you click the overlay instead of
306 |   // on page load since 500K rows of data can take a few seconds to create.
307 |   //
308 |   const windowed = document.getElementsByTagName('example-windowed')[0]
309 |   const overlay = document.getElementById('click-to-load')
310 | 
311 |   overlay.addEventListener('click', e => {
312 |     const rows = []
313 | 
314 |     for (let i = 1; i < 500001; i++) {
315 |       rows.push({
316 |         id: i - 1,
317 |         title: `Row #${i}`,
318 |         date: String(new Date()),
319 |         random: Math.random().toString(16).slice(2)
320 |       })
321 |     }
322 | 
323 |     overlay.classList.add('hidden')
324 |     windowed.load(rows)
325 |   })
326 | }
327 | 


--------------------------------------------------------------------------------
/src/fonts/FiraMono-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/socketsupply/tonic-docs/a724da454d0e8d0f58ed659a15e70575ebb2d018/src/fonts/FiraMono-Regular.woff2


--------------------------------------------------------------------------------
/src/fonts/Inter-Black.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/socketsupply/tonic-docs/a724da454d0e8d0f58ed659a15e70575ebb2d018/src/fonts/Inter-Black.woff2


--------------------------------------------------------------------------------
/src/fonts/Inter-Light.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/socketsupply/tonic-docs/a724da454d0e8d0f58ed659a15e70575ebb2d018/src/fonts/Inter-Light.woff2


--------------------------------------------------------------------------------
/src/images/logo.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
3 | 
4 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Tonic from '@socketsupply/tonic'
 2 | import components from '@socketsupply/components'
 3 | import examples from './example-setup.js'
 4 | 
 5 | components(Tonic)
 6 | 
 7 | document.addEventListener('DOMContentLoaded', () => {
 8 |   if (window.location.pathname === '/examples.html') {
 9 |     examples()
10 |   }
11 | 
12 |   const theme = window.localStorage.getItem('theme') || 'light'
13 |   document.body.setAttribute('theme', theme)
14 | 
15 |   const input = document.getElementById('dark')
16 | 
17 |   if (!input) return
18 | 
19 |   input.value = theme === 'dark'
20 | 
21 |   document.addEventListener('change', e => {
22 |     if (Tonic.match(e.target, '#dark')) {
23 |       const theme = e.target.checked ? 'dark' : 'light'
24 |       window.localStorage.setItem('theme', theme)
25 |       document.body.setAttribute('theme', theme)
26 |     }
27 |   })
28 | })
29 | 


--------------------------------------------------------------------------------
/src/markdown/components/accordion.md:
--------------------------------------------------------------------------------
  1 | # Accordion
  2 | The `Accordion` component creates a set of interactive headings that hide and show content sections, with **Keyboard Support**
  3 | 
  4 | ## Demo
  5 | 
  6 | <div class="example accordion">
  7 |   <tonic-accordion id="accordion-a">
  8 |     <tonic-accordion-section
  9 |       name="accordion-test-1"
 10 |       id="accordion-test-1"
 11 |       data="preview"
 12 |       label="Accordion Test 1">
 13 |       Whatever
 14 |     </tonic-accordion-section>
 15 |     <tonic-accordion-section
 16 |       name="accordion-test-2"
 17 |       id="accordion-test-2"
 18 |       label="Accordion Test 2">
 19 |       Some Content
 20 |     </tonic-accordion-section>
 21 |     <tonic-accordion-section
 22 |       name="accordion-test-3"
 23 |       id="accordion-test-3"
 24 |       label="Accordion Test 3">
 25 |       The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.
 26 |     </tonic-accordion-section>
 27 |   </tonic-accordion>
 28 | </div>
 29 | 
 30 | Add the `multiple` property to the `tonic-accordion` component to allow multiple sections to be expanded at one time.
 31 | 
 32 | <div class="example">
 33 |   <tonic-accordion data-allow-multiple="true" id="accordion-b">
 34 |     <tonic-accordion-section
 35 |       name="multiple-accordion-test-1"
 36 |       id="multiple-accordion-test-1"
 37 |       label="Multiple Accordion Test 1">
 38 |       Whatever
 39 |     </tonic-accordion-section>
 40 |     <tonic-accordion-section
 41 |       name="multiple-accordion-test-2"
 42 |       id="multiple-accordion-test-2"
 43 |       label="Multiple Accordion Test 2">
 44 |       Some Content
 45 |     </tonic-accordion-section>
 46 |     <tonic-accordion-section
 47 |       name="multiple-accordion-test-3"
 48 |       id="multiple-accordion-test-3"
 49 |       label="Multiple Accordion Test 3">
 50 |       The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.
 51 |     </tonic-accordion-section>
 52 |   </tonic-accordion>
 53 | </div>
 54 | 
 55 | ## Code
 56 | 
 57 | #### HTML
 58 | ```html
 59 |   <tonic-accordion id="my-accordion">
 60 |     <tonic-accordion-section
 61 |       name="bucket-test-1"
 62 |       id="bucket-test-1"
 63 |       data="preview"
 64 |       label="Accordion Test 1">
 65 |       Whatever
 66 |     </tonic-accordion-section>
 67 |     <tonic-accordion-section
 68 |       name="bucket-test-2"
 69 |       id="bucket-test-2"
 70 |       label="Accordion Test 2">
 71 |       Some Content
 72 |     </tonic-accordion-section>
 73 |     <tonic-accordion-section
 74 |       name="bucket-test-3"
 75 |       id="bucket-test-3"
 76 |       label="Accordion Test 3">
 77 |       The visual design includes features intended to help users understand that the accordion provides enhanced keyboard navigation functions. When an accordion header button has keyboard focus, the styling of the accordion container and all its header buttons is changed.
 78 |     </tonic-accordion-section>
 79 |   </tonic-accordion>
 80 | ```
 81 | 
 82 | ## Api
 83 | 
 84 | ### Properties
 85 | 
 86 | for **TonicAccordion**
 87 | 
 88 | | Property | Type | Description | Default |
 89 | | :--- | :--- | :--- | :--- |
 90 | | `multiple` | *number* | Allow multiple sections to be expanded at one time. | `0` |
 91 | | `theme` | *string* | Adds a theme color (`light`, `dark`, or whatever is defined in your base CSS. | `light` |
 92 | 
 93 | for **TonicAccordionSection**
 94 | 
 95 | | Property | Type | Description | Default |
 96 | | :--- | :--- | :--- | :--- |
 97 | | `id` | *string* | Adds the `id` attribute. | |
 98 | | `name` | *string* | Adds the `name` attribute. | |
 99 | | `label` | *string* | Pass into | `0` |
100 | 
101 | ### Instance Members
102 | 
103 | | Property | Description |
104 | | :--- | :--- |
105 | | `click()` | Click event |
106 | 


--------------------------------------------------------------------------------
/src/markdown/components/badge.md:
--------------------------------------------------------------------------------
 1 | # Badge
 2 | The `Badge` component creates a notification badge with a counter and unread alert.
 3 | 
 4 | ## Demo
 5 | 
 6 | <div class="example">
 7 |   <tonic-badge count=5 id="badge-a"></tonic-badge>
 8 |   <div class="button-group">
 9 |     <span id="add-notification">Add</span>
10 |     <span id="subtract-notification">Subtract</span>
11 |   </div>
12 | </div>
13 | 
14 | ## Code
15 | 
16 | To update the notification count, pass in the `count` property.
17 | 
18 | #### HTML
19 | ```html
20 | <tonic-badge id="my-badge"></tonic-badge>
21 | ```
22 | 
23 | ## Api
24 | 
25 | ### Properties
26 | 
27 | | Property | Type | Description | Default |
28 | | :--- | :--- | :--- | :--- |
29 | | `id` | *string* | Adds the `id` attribute. | |
30 | | `name` | *string* | Adds the `name` attribute. | |
31 | | `count` | *string* | Updates the `count` property. | `0` |
32 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
33 | 
34 | 
35 | ### Instance Members
36 | 
37 | | Property | Description |
38 | | :--- | :--- |
39 | | `value` | Getter/setter for the badge count. |
40 | 


--------------------------------------------------------------------------------
/src/markdown/components/button.md:
--------------------------------------------------------------------------------
 1 | # Button
 2 | 
 3 | A `Button` component with a built-in loading state.
 4 | 
 5 | ## Demo
 6 | 
 7 | <div class="example buttons">
 8 |   <tonic-button
 9 |     async="true"
10 |     id="tonic-button-example-1"
11 |     class="tonic-button-example"
12 |     value="click-me">Click me</tonic-button>
13 |   <tonic-button
14 |     async="true"
15 |     class="danger tonic-button-example"
16 |     id="tonic-button-example-2"
17 |     value="click-me">Click me</tonic-button>
18 |   <tonic-button
19 |     async="true"
20 |     class="outline tonic-button-example"
21 |     id="tonic-button-example-3"
22 |     value="click-me">Click me</tonic-button>
23 |   <tonic-button
24 |     type="icon"
25 |     class="tonic-button-example"
26 |     id="tonic-button-example-4"
27 |     fill="var(--tonic-primary)"
28 |     symbol-id="edit"
29 |     size="22px"
30 |     value="click-me"></tonic-button>
31 |   <tonic-button
32 |     class="tonic-button-example"
33 |     disabled="true"
34 |     value="click-me">Disabled</tonic-button>
35 | </div>
36 | 
37 | ## Code
38 | 
39 | #### HTML
40 | ```html
41 | <tonic-button
42 |   async="true"
43 |   id="tonic-button-example"
44 |   value="click-me">Click me
45 | </tonic-button>
46 | ```
47 | 
48 | ### CSS
49 | An example of how to modify a button with a specific class.
50 | 
51 | ```css
52 | tonic-button.danger {
53 |   --tonic-button-text: rgba(255, 255, 255, 1);
54 |   --tonic-button-background: rgba(240, 102, 83, 1);
55 |   --tonic-button-background-hover: rgba(250, 112, 93, 1);
56 |   --tonic-button-background-focus: rgba(245, 106, 88, 1);
57 | }
58 | ```
59 | 
60 | ## Api
61 | 
62 | ### Properties
63 | 
64 | | Property | Type | Description | Default |
65 | | :--- | :--- | :--- | :--- |
66 | | `id` | *string* | Button with `id` attribute. | |
67 | | `name` | *string* | Button with a `name` attribute. | |
68 | | `type` | *string* | Type of button (i.e. submit). | |
69 | | `value` | *string* | Value of the button. | `Submit` |
70 | | `disabled` | *boolean* | Button with the `disabled` attribute. | `false` |
71 | | `autofocus` | *boolean* | Button with the `autofocus` attribute. | `false` |
72 | | `async` | *boolean* | Make button asynchronous. | `false` |
73 | | `is-active` | *boolean* | Active button. | `false` |
74 | | `width` | *string* | Width of the button. | `150px` |
75 | | `height` | *string* | Height of the button. | `38px` |
76 | | `radius` | *string* | Radius of the button. | `2px` |
77 | | `background-color` | *string* | Button background color. |  |
78 | | `text-color` | *string* | TextColor of the button. |  |
79 | | `href` | *string* | Add a location (url) for click event. | |
80 | | `target` | *string* | If you specify target, it will open an href in a new window, unless target is `_self` | `_self` |
81 | | `tabindex` | *number* | Add a `tabindex` for the button. | |
82 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
83 | | `symbol-id` | *string* | When `type=icon`, this id will be used to refer to the svg symbol. | |
84 | | `sizse` | *string* | When `type=icon`, this id will be used as the size of the icon. | |
85 | 
86 | ### Instance Methods & Members
87 | 
88 | | Method | Description |
89 | | :--- | :--- |
90 | | `click()` | Click event |
91 | | `loading(state)` | Removes loading from an async button. |
92 | 


--------------------------------------------------------------------------------
/src/markdown/components/chart.md:
--------------------------------------------------------------------------------
 1 | # Chart
 2 | An example component that uses [chart.js][0] `2.8.0`.
 3 | 
 4 | ## Demo
 5 | <tonic-chart
 6 |   type="horizontalBar"
 7 |   src="/chartdata.json"
 8 |   width="300px"
 9 |   height="150px">
10 | </tonic-chart>
11 | 
12 | ## Code
13 | 
14 | #### HTML
15 | Options is optional and contains any valid chartjs configuration options.
16 | 
17 | ```js
18 | const opts = {
19 |   tooltips: {
20 |     enabled: false
21 |   },
22 |   legend: {
23 |     display: false
24 |   },
25 |   drawTicks: true,
26 |   drawBorder: true
27 | }
28 | ```
29 | 
30 | ```html
31 | <tonic-chart
32 |   type="horizontalBar"
33 |   width="300"
34 |   height="150px"
35 |   options="${opts}"
36 |   chart-library="${require('chart.js')}"
37 |   src="/chartdata.json">
38 | </tonic-chart>
39 | ```
40 | 
41 | #### JSON
42 | 
43 | ```json
44 | {
45 |   "labels": ["Foo", "Bar", "Bazz"],
46 |   "datasets": [{
47 |     "label": "Quxx (millions)",
48 |     "backgroundColor": ["#c3c3c3", "#f06653", "#8f8f8f"],
49 |     "data": [278, 467, 34]
50 |   }]
51 | }
52 | ```
53 | 
54 | ## Api
55 | 
56 | ### Properties
57 | 
58 | | Property | Type | Description | Default |
59 | | :--- | :--- | :--- | :--- |
60 | | `title` | *string* | The title of the chart. | |
61 | | `type` | *string* | The type of the bar chart. | |
62 | | `chart-library` | *function* | The `require('chart.js')` module | |
63 | | `src` | *object* or *string* | The data for the chart. A url or an object. | |
64 | | `tooltip` | *bool* | Show or don't show the tooltip. | |
65 | | `width` | *string* | Width of the chart (include the unit, `%`, `px` etc). | |
66 | | `height` | *string* | Height of the chart (include the unit, `%`, `px`, etc). | |
67 | 
68 | ### Instance Methods & Members
69 | 
70 | | Method | Description |
71 | | :--- | :--- |
72 | | `draw(Object, Object)` | Draws (or re-draws) the chart. The first parameter is the data and the second is options. |
73 | | `setChart(Function)` | Sets the chart library; call with `setChart(require('chart.js))`. This is an alternative to the `chart-library` HTML attribute |
74 | 
75 | [0]:https://www.chartjs.org/
76 | 


--------------------------------------------------------------------------------
/src/markdown/components/checkbox.md:
--------------------------------------------------------------------------------
 1 | # Checkbox
 2 | 
 3 | The `Checkbox` component is used to create a styled checkbox, with or without a
 4 | label. You can also create a custom checkbox using SVG icons.
 5 | 
 6 | > *__Note:__ This component requires the `tonic-sprite` component.*
 7 | 
 8 | ## Demo
 9 | 
10 | <div class="example">
11 |   <tonic-checkbox
12 |     id="tonic-checkbox-example"
13 |     checked="true"
14 |     label="Checkbox with Label">
15 |   </tonic-checkbox>
16 | </div>
17 | 
18 | ## Code
19 | 
20 | #### HTML
21 | ```html
22 | <tonic-checkbox
23 |   id="tonic-checkbox-example"
24 |   label="Checkbox with Label">
25 | </tonic-checkbox>
26 | ```
27 | 
28 | ## Api
29 | 
30 | ### Properties
31 | 
32 | | Property | Type | Description | Default |
33 | | :--- | :--- | :--- | :--- |
34 | | `id` | *string* | Adds `id` attribute. <span class="req">required</span> |  |
35 | | `name` | *string* | Adds `name` attribute. |  |
36 | | `disabled` | *boolean* | Adds `disabled` attribute. | `false` |
37 | | `checked` | *boolean* | Adds `checked` attribute. | `false` |
38 | | `size` | *string* | Changes the `width` and `height` of the icon. | `18px` |
39 | | `color` | *string* | Changes the color of the icon. | <code>--primary</code> |
40 | | `tabindex` | *number* | Add a `tabindex` for the checkbox. | |
41 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
42 | | `virtual` | *boolean* | Makes the checkbox non-clickable, you need to set the checked state manually | `false` |
43 | 
44 | ### Instance Properties
45 | 
46 | | Method | Description |
47 | | :--- | :--- |
48 | | `value` | A getter/setter that returns `true` if the checkbox is checked or `false` if the checkbox is not checked. |
49 | 
50 | ### Static Methods
51 | 
52 | | Method | Description |
53 | | :--- | :--- |
54 | | `addIcon(state, fn)` | Add a custom SVG as the icon for the given state Where the `state` parameter is either `on` or `off` and the `fn` parameter is a function that returns your SVG's xml. The function will receive the color prop as an argument. |
55 | 


--------------------------------------------------------------------------------
/src/markdown/components/dialog.md:
--------------------------------------------------------------------------------
  1 | # Dialog
  2 | 
  3 | All dialogs have different use cases. Anything could go inside them. So this
  4 | class tries to accommodate a wide range of use cases by being the minimum of
  5 | what is needed to start with.
  6 | 
  7 | > *__Note:__ This component requires the `tonic-sprite` component.*
  8 | 
  9 | ## Demo
 10 | <tonic-dialog
 11 |   id="example-dialog"
 12 |   width="350px"
 13 |   height="260px">
 14 |   <show-random
 15 |     id="show-random">
 16 |   </show-random>
 17 | </tonic-dialog>
 18 | 
 19 | <div class="example">
 20 |   <tonic-button id="example-dialog-link">Open</tonic-button>
 21 | </div>
 22 | 
 23 | ## Code
 24 | 
 25 | #### HTML
 26 | ```html
 27 | <button id="open-dialog">Open Dialog</button>
 28 | 
 29 | <tonic-dialog id="example-dialog">
 30 |   <show-random>
 31 |   </show-random>
 32 | </tonic-dialog>
 33 | ```
 34 | 
 35 | #### JS
 36 | ```js
 37 | class ShowRandom extends Tonic {
 38 |   async click (e) {
 39 |     if (Tonic.match(e.target, '#update')) {
 40 |       this.state.message = String(Math.random())
 41 |       this.reRender()
 42 |     }
 43 |   }
 44 | 
 45 |   render () {
 46 |     return this.html`
 47 |       <header>Dialog</header>
 48 | 
 49 |       <main>
 50 |         ${this.state.message || 'Ready'}
 51 |       </main>
 52 | 
 53 |       <footer>
 54 |         <tonic-button id="update">Update</tonic-button>
 55 |       </footer>
 56 |     `
 57 |   }
 58 | }
 59 | 
 60 | Tonic.add(ShowRandom)
 61 | 
 62 | const link = document.getElementById('open-dialog')
 63 | const dialog = document.getElementById('example-dialog')
 64 | 
 65 | link.addEventListener('click', async e => dialog.show())
 66 | ```
 67 | 
 68 | #### CSS
 69 | 
 70 | Example styles that a project might set up outside the component's css.
 71 | 
 72 | ```css
 73 | .tonic--dialog {
 74 |   display: grid;
 75 |   grid-template-rows: 44px 1fr 80px;
 76 | }
 77 | 
 78 | .tonic--dialog > header {
 79 |   user-select: none;
 80 |   line-height 44px;
 81 |   text-align center;
 82 |   color var(--tonic-medium);
 83 |   display block;
 84 | }
 85 | 
 86 | .tonic--dialog > main {
 87 |   padding 0 30px 10px;
 88 |   position relative;
 89 |   text-align center;
 90 | }
 91 | 
 92 | .tonic--dialog > footer {
 93 |   user-select: none;
 94 |   text-align center;
 95 |   background-color var(--tonic-window);
 96 |   padding 16px;
 97 |   text-align center;
 98 |   width 100%;
 99 |   display block;
100 | }
101 | ```
102 | 
103 | ## Api
104 | 
105 | ### Properties
106 | 
107 | | Property | Type | Description | Default |
108 | | :--- | :--- | :--- | :--- |
109 | | `id` | *string* | Adds an `id` attribute. |  |
110 | | `width` | *string* | Sets the width of the dialog. |  |
111 | | `height` | *string* | Sets the height of the dialog. |  |
112 | 
113 | ### Instance Methods & Members
114 | 
115 | | Method | Description |
116 | | :--- | :--- |
117 | | `show()` | Shows the dialog. Returns a promise that can be awaited while the animation finishes. |
118 | | `hide()` | Hides the dialog. Returns a promise that can be awaited while the animation finishes. |
119 | 


--------------------------------------------------------------------------------
/src/markdown/components/form.md:
--------------------------------------------------------------------------------
 1 | # Form
 2 | 
 3 | The `form` component implements `input` and `change` events that collect
 4 | the values of any child component that has the `data-key` attribute. The values
 5 | collected are stored on the `tonic-form` state and accessible from the `value`
 6 | property.
 7 | 
 8 | The value of `data-key` expects a `dot notation` to determine what the value
 9 | on the form will be.
10 | 
11 | ## Demo
12 | 
13 | <div class="example">
14 |   <tonic-form id="form-example">
15 |     <tonic-input width="100%" data-key="ka" required="true" id="a">
16 |     </tonic-input>
17 |     <tonic-select
18 |       data-key="foo.kb"
19 |       id="b"
20 |       width="100%"
21 |       required="true"
22 |     >
23 |       <option value="" width="100%" selected="true" disabled="true">Select One</option>
24 |       <option value="a">a</option>
25 |       <option value="b">b</option>
26 |     </tonic-select>
27 |     <tonic-input id="c" width="100%" value="vc">
28 |     </tonic-input>
29 |     <tonic-input required="true" width="100%" data-key="bar.0.buzz" id="d" value="vd">
30 |     </tonic-input>
31 |     <tonic-button disabled="true" id="form-submit">Submit</tonic-button>
32 |   </tonic-form>
33 | </div>
34 | 
35 | ## Code
36 | 
37 | #### HTML
38 | 
39 | ```html
40 | <tonic-form id="form-example">
41 |   <tonic-input data-key="ka" required="true" id="a">
42 |   </tonic-input>
43 |   <tonic-select
44 |     data-key="foo.kb"
45 |     id="b"
46 |     required="true"
47 |   >
48 |     <option value="" selected="true" disabled="true">Select One</option>
49 |     <option value="a">a</option>
50 |     <option value="b">b</option>
51 |   </tonic-select>
52 |   <tonic-input id="c" value="vc">
53 |   </tonic-input>
54 |   <tonic-input required="true" data-key="bar.0.buzz" id="d" value="vd">
55 |   </tonic-input>
56 |   <tonic-button disabled="true" id="form-submit">Submit</tonic-button>
57 | </tonic-form>
58 | ```
59 | 
60 | ---
61 | 
62 | #### JS
63 | 
64 | ```js
65 | const form = document.getElementById('form-example')
66 | const expected = {
67 |   ka: 'va',
68 |   foo: {
69 |     kb: 'vb'
70 |   },
71 |   bar: [{ buzz: 'vd' }]
72 | }
73 | 
74 | assert(form.value === expected)
75 | ```
76 | 
77 | ## Api
78 | 
79 | ### Properties
80 | 
81 | | Property | Type | Description | Default |
82 | | :--- | :--- | :--- | :--- |
83 | | `id` | *string* | Input with `id` attribute. <span class="req">required</span> | |
84 | | `fill` | *boolean* | If specified, upon render, any child-element value that specifies `data-key` will be filled with the form's corresponding state value unless a value is specified as a property. |
85 | 
86 | ### Instance Methods
87 | 
88 | | Method | Description |
89 | | :--- | :--- |
90 | | `validate({ decorate })` | Reset and run all validation for all components that implement `setValid()` and `setInvalid()`. If `decorate` is set to `false`, this function only checks for validity. |
91 | | `setValid()` | Attempt to call setValid() on all form elements that implement it. |
92 | 
93 | ### Instance Members
94 | 
95 | | Property | Description |
96 | | :--- | :--- |
97 | | `value` | Getter/setter for the value of the form. |
98 | 


--------------------------------------------------------------------------------
/src/markdown/components/icon.md:
--------------------------------------------------------------------------------
 1 | # Icon
 2 | The `Icon` component is used to create an SVG icon with a custom size and color.
 3 | 
 4 | Your single SVG sprite file should have the following base structure, using `<symbol>` and an `id` to refer to the specific icon:
 5 | 
 6 | ```
 7 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 8 |   <symbol id="example">
 9 |     <path />
10 |   </symbol>
11 | </svg>
12 | ```
13 | 
14 | ## Demo
15 | 
16 | <div class="example">
17 |   <tonic-icon
18 |     symbol-id="example"
19 |     src="/images/sprite.svg"
20 |     fill="red"
21 |     size="40px"></tonic-icon>
22 | </div>
23 | 
24 | ## Code
25 | 
26 | #### HTML
27 | ```html
28 | <tonic-icon
29 |   symbol-id="example"
30 |   src="/images/sprite.svg"
31 |   fill="red"
32 |   size="40px">
33 | </tonic-icon>
34 | ```
35 | 
36 | ## Api
37 | 
38 | ### Properties
39 | 
40 | | Property | Type | Description | Default |
41 | | :--- | :--- | :--- | :--- |
42 | | `size` | *string* | Changes the width and height of the icon. | `25px` |
43 | | `fill` | *string* | Changes the color of the icon. | `var(--tonic-primary)` |
44 | | `src` | *string* | Optional, a custom file to use as the source. | `./sprite.svg` |
45 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
46 | 


--------------------------------------------------------------------------------
/src/markdown/components/input.md:
--------------------------------------------------------------------------------
  1 | # Input
  2 | 
  3 | The `Input` component creates an input that can be invalidated.
  4 | 
  5 | ## Demo
  6 | 
  7 | <div class="example">
  8 |   <tonic-input
  9 |     label="Email Address"
 10 |     type="email"
 11 |     width="280px"
 12 |     id="tonic-input-example"
 13 |     placeholder="Enter a valid email address"
 14 |     spellcheck="false"
 15 |     error-message="Invalid Email">
 16 |   </tonic-input>
 17 |   <span id="tonic-input-state"><span>
 18 | </div>
 19 | 
 20 | ## Code
 21 | 
 22 | #### HTML
 23 | 
 24 | ```html
 25 | <tonic-input
 26 |   label="Email Address"
 27 |   type="email"
 28 |   width="280px"
 29 |   id="tonic-input-example"
 30 |   placeholder="Enter a valid email address"
 31 |   spellcheck="false"
 32 |   error-message="Invalid Email">
 33 | </tonic-input>
 34 | ```
 35 | 
 36 | Native auto-complete is also supported.
 37 | 
 38 | ```html
 39 | <tonic-input
 40 |   label="Email Address"
 41 |   type="email"
 42 |   id="tonic-input-example"
 43 | >
 44 |   <option value="a">primary@foo.com</option>
 45 |   <option value="b">secondary@foo.com</option>
 46 | </tonic-input>
 47 | ```
 48 | 
 49 | ---
 50 | 
 51 | The input will validate automatically if you specify the `type` or the `pattern` attribute.
 52 | 
 53 | You can also validate or invalidate an input with Javascript using the methods `setValid()` and `setInvalid()`
 54 | 
 55 | #### JS
 56 | ```js
 57 | setInvalid.addEventListener('click', (e) => {
 58 |   input.setInvalid('There was a problem')
 59 | })
 60 | ```
 61 | 
 62 | ## Api
 63 | 
 64 | ### Properties
 65 | 
 66 | | Property | Type | Description | Default |
 67 | | :--- | :--- | :--- | :--- |
 68 | | `id` | *string* | Input with `id` attribute. <span class="req">required</span> | |
 69 | | `aria-invalid` | *boolean* | Adds `aria-invalid` attribute. | `false` |
 70 | | `aria-labelledby` | *string* | Adds `aria-labelledby` attribute. | `false` |
 71 | | `disabled` | *boolean* | Makes the input `disabled`. | `false` |
 72 | | `error-message` | *string* | Changes error message text. | |
 73 | | `invalid` | *boolean* | Adds the `invalid` attribute. | `false` |
 74 | | `label` | *string* | Adds a label to the input. | |
 75 | | `name` | *string* | Input with `name` attribute. | |
 76 | | `pattern` | *string* | Regex for checking value. | |
 77 | | `placeholder` | *string* | Inserts `placeholder` text. | |
 78 | | `position` | *string* | The position of an icon, if specified. | |
 79 | | `radius` | *string* | Radius of the input. | `3px` |
 80 | | `required` | *boolean* | Makes the input `required`. | `false` |
 81 | | `readonly` | *boolean* | Makes the input `readonly`. | `false` |
 82 | | `spellcheck` | *boolean* | Enable `spellcheck` on the input. | `false` |
 83 | | `src` | *string* | The src to use for the icon. | |
 84 | | `symbol-id` | *string* | The symbol id to use for the icon. | |
 85 | | `fill` | *string* | The fill color to use for the icon. | |
 86 | | `color` | *string* | The path color to use for the icon. | |
 87 | | `tabindex` | *number* | Add a `tabindex` for the input. | |
 88 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
 89 | | `type` | *string* | Type of input (text, password, email). | `text` |
 90 | | `width` | *string* | Width of the input. | `250px` |
 91 | 
 92 | ### Instance Methods
 93 | 
 94 | | Method | Description |
 95 | | :--- | :--- |
 96 | | `setValid()` | Sets the input to valid. |
 97 | | `setInvalid(msg)` | Invalidate the input. |
 98 | 
 99 | ### Instance Members
100 | 
101 | | Property | Description |
102 | | :--- | :--- |
103 | | `value` | Getter/setter for the value of the input. |
104 | 


--------------------------------------------------------------------------------
/src/markdown/components/loader.md:
--------------------------------------------------------------------------------
 1 | # Loader
 2 | 
 3 | Renders an animated SVG-based loader. Placed inside a relative or absolute
 4 | positioned container, it will center itself.
 5 | 
 6 | ## Demo
 7 | 
 8 | <div class="example">
 9 |   <tonic-loader>
10 |   </tonic-loader>
11 | </div>
12 | 
13 | ## Code
14 | 
15 | #### HTML
16 | 
17 | ```html
18 | <tonic-loader>
19 | </tonic-loader>
20 | ```
21 | 
22 | ## Api
23 | 
24 | ### Properties
25 | 
26 | | Property | Type | Description | Default |
27 | | :--- | :--- | :--- | :--- |
28 | | `timeout` | *number* | How long to spin (`-1` will be indefinite, though this is not recommended because animations can tax the CPU). | |
29 | 
30 | 


--------------------------------------------------------------------------------
/src/markdown/components/panel.md:
--------------------------------------------------------------------------------
 1 | # Panel
 2 | Similar to dialog, just a wrapper with hide and show.
 3 | 
 4 | > *__Note:__ This component requires the `tonic-sprite` component.*
 5 | 
 6 | ## Demo
 7 | <tonic-panel
 8 |   width="50%"
 9 |   width-mobile="100%"
10 |   id="tonic-panel-example">
11 |   <read-wikipedia
12 |     id="content-panel-example">
13 |   </read-wikipedia>
14 | </tonic-panel>
15 | 
16 | <div class="example">
17 |   <tonic-button id="content-panel-link-example">
18 |     Click to open
19 |   </tonic-button>
20 | </div>
21 | 
22 | ## Code
23 | 
24 | #### HTML
25 | 
26 | ```html
27 | <tonic-panel
28 |   id="content-panel-example"
29 |   overlay="true">
30 | </tonic-panel>
31 | ```
32 | 
33 | ## Api
34 | 
35 | ### Properties
36 | 
37 | | Property | Type | Description | Default |
38 | | :--- | :--- | :--- | :--- |
39 | | `id` | *string* | Adds the `id` attribute. | |
40 | | `position` | *string* | Changes the position of the panel (`left` or `right`). | `right` |
41 | | `width` | *string* | Width of the panel. | |
42 | | `width-mobile` | *string* | Width of the panel on mobile. | |
43 | 
44 | ### Instance Methods & Members
45 | 
46 | | Method | Description |
47 | | :--- | :--- |
48 | | `show()` | Shows the panel. |
49 | | `hide()` | Hides the panel. |


--------------------------------------------------------------------------------
/src/markdown/components/popover.md:
--------------------------------------------------------------------------------
 1 | # Popover
 2 | 
 3 | The `popover` component creates a popover activated by a click event. It is positioned in relation to the trigger.
 4 | 
 5 | ## Demo
 6 | 
 7 | <tonic-popover id="popover-example" width="175px" for="popover-example-trigger">
 8 |   <div>Item 1</div>
 9 |   <div>Item 2</div>
10 |   <div>Item 3</div>
11 | </tonic-popover>
12 | 
13 | <style nonce="%nonce%">
14 |   #popover-example-trigger {
15 |     width: 50px;
16 |     height: 50px;
17 |     background-color: var(--tonic-background);
18 |     display: inline-block;
19 |     padding: 15px;
20 |     text-align: center;
21 |     border-radius: 7px;
22 |     cursor: pointer;
23 |     transition: background-color 0.2s ease;
24 |   }
25 | 
26 |   #popover-example-trigger:hover {
27 |     background-color: var(--tonic-secondary);
28 |   }
29 | 
30 |   .tonic--popover {
31 |     line-height: 25px;    
32 |   }
33 | </style>
34 | 
35 | <div class="example">
36 |   <div id="popover-example-trigger">+</div>
37 | </div>
38 | 
39 | ## Code
40 | 
41 | #### HTML
42 | ```html
43 | <tonic-popover id="popover-example" width="175px" for="popover-example-trigger">
44 |   <div>Item 1</div>
45 |   <div>Item 2</div>
46 |   <div>Item 3</div>
47 | </tonic-popover>
48 | ```
49 | 
50 | ## Api
51 | 
52 | ### Properties
53 | 
54 | | Property | Type | Description | Default |
55 | | :--- | :--- | :--- | :--- |
56 | | `for` | *string* | Adds a `for` attribute. <span class="req">required</span> |  |
57 | | `width` | *string* | Changes the `width` style. | `auto` |
58 | | `height` | *string* | Changes `height` style. | `auto` |
59 | | `open` | *boolean* | Determines the default state of the popover. | `false` |
60 | | `padding` | *string* | Changes `padding` style. | `15px` |
61 | | `margin` | *number* | Changes `margin` style. | `10` |
62 | | `position` | *string* | Changes position of popover. Can be one of: `top`, `topleft`, `topright`, `bottom`, `bottomleft`, or `bottomright`. | `bottomleft` |
63 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
64 | 
65 | ### Instance Methods & Members
66 | 
67 | | Method | Description |
68 | | :--- | :--- |
69 | | `show()` | Shows the popover. |
70 | | `hide()` | Hides the popover. |
71 | 


--------------------------------------------------------------------------------
/src/markdown/components/profile-image.md:
--------------------------------------------------------------------------------
 1 | # ProfileImage
 2 | The `ProfileImage` component is used to create an SVG icon with a custom size
 3 | and color.
 4 | 
 5 | > *__Note:__ This component requires the `tonic-sprite` component.*
 6 | 
 7 | ## Demo
 8 | 
 9 | <div class="example">
10 |   <tonic-profile-image
11 |     id="profile-image-example-editable"
12 |     size="150px"
13 |     editable="true">
14 |   </tonic-profile-image>
15 | </div>
16 | 
17 | ## Code
18 | 
19 | #### HTML
20 | ```html
21 | <tonic-profile-image
22 |   id="profile-image-example-editable"
23 |   size="150px"
24 |   editable="true">
25 | </tonic-profile-image>
26 | ```
27 | 
28 | ## Api
29 | 
30 | ### Properties
31 | 
32 | | Property | Type | Description | Default |
33 | | :--- | :--- | :--- | :--- |
34 | | `id` | *string* | Adds the `id` attribute. | |
35 | | `name` | *string* | Adds the `name` attribute. | |
36 | | `src` | *string* | Add an image source. | |
37 | | `size` | *string* | Changes the width and height of the image. | `25px` |
38 | | `radius` | *string* | Change the border-radius of the image. | `5px` |
39 | | `border` | *string* | Change the border of the image (i.e. '1px solid white'). |  |
40 | | `editable` | *boolean* | Add an edit overlay. | `false` |
41 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
42 | 
43 | ### Events
44 | | Name | Description |
45 | | :--- | :--- |
46 | | `change` | Emitted when the `src` changes. |
47 | | `error` | Emitted when there was a problem reading the provided input. |
48 | 


--------------------------------------------------------------------------------
/src/markdown/components/progress-bar.md:
--------------------------------------------------------------------------------
 1 | # ProgressBar
 2 | The `ProgressBar` component creates an updatable progress bar.
 3 | 
 4 | ## Demo
 5 | 
 6 | <div class="example">
 7 |   <tonic-progress-bar id="progress-bar-example">
 8 |   </tonic-progress-bar>
 9 |   <div class="button-group">
10 |     <span id="start-progress">Start</span>
11 |     <span id="stop-progress">Stop</span>
12 |   </div>
13 | </div>
14 | 
15 | ## Code
16 | 
17 | #### HTML
18 | ```html
19 | <tonic-progress-bar id="progress-bar-example">
20 | </tonic-progress-bar>
21 | ```
22 | 
23 | ## Api
24 | 
25 | ### Properties
26 | 
27 | | Property | Type | Description | Default |
28 | | :--- | :--- | :--- | :--- |
29 | | `width` | *string* | Changes the width of the progress bar. | `280px` |
30 | | `height` | *string* | Changes the height of the progress bar. | `15px` |
31 | | `color` | *string* | Changes the color of the progress bar. | `--accent` |
32 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
33 | 
34 | ### Instance Methods
35 | 
36 | | Method | Description |
37 | | :--- | :--- |
38 | | `setProgress(number)` | Sets the progress (percentage). |
39 | 
40 | ### Instance Members
41 | 
42 | | Method | Description |
43 | | :--- | :--- |
44 | | `value` | A getter/setter that provides the current percentage value of the progress bar. |
45 | 


--------------------------------------------------------------------------------
/src/markdown/components/range.md:
--------------------------------------------------------------------------------
 1 | # Range
 2 | 
 3 | The `Range` component creates a range input or slider.
 4 | 
 5 | ## Demo
 6 | 
 7 | <div class="example">
 8 |   <tonic-range
 9 |     label="The value is %i%"
10 |     value="80"
11 |     id="tonic-range-example">
12 |   </tonic-range>
13 | </div>
14 | 
15 | ## Code
16 | 
17 | #### HTML
18 | 
19 | ```html
20 | <tonic-range
21 |   label="The value is %i%"
22 |   id="tonic-range-example">
23 | </tonic-range>
24 | ```
25 | 
26 | ## Api
27 | 
28 | ### Properties
29 | 
30 | | Property | Type | Description | Default |
31 | | :--- | :--- | :--- | :--- |
32 | | `id` | *string* | Input with `id` attribute. <span class="req">Required</span> | |
33 | | `name` | *string* | Input with `name` attribute. | |
34 | | `disabled` | *boolean* | Makes the input `disabled`. | `false` |
35 | | `width` | *string* | Width of the track. | `250px` |
36 | | `height` | *string* | Height of the track. | `4px` |
37 | | `radius` | *string* | Radius of the track. | `3px` |
38 | | `min` | *string* | Least possible value. | `0` |
39 | | `max` | *string* | Greatest possible value. | `100` |
40 | | `step` | *string* | Number the value must adhere to. | `1` |
41 | | `label` | *string* | Label that displays the current value. Use %i, %f, etc to represent the value. | `false` |
42 | | `thumbColor` | *string* | Color of the slider "thumb" | `var(--tonic-window)` |
43 | | `thumbRadius` | *string* | Radius of the slider "thumb" | `50px` |
44 | | `value` | *string* | Default value | `50` |
45 | | `tabindex` | *number* | Add a `tabindex` for the range. | |
46 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
47 | 
48 | ### Instance Members
49 | 
50 | | Property | Description |
51 | | :--- | :--- |
52 | | `value` | Get the current value of the range input. |
53 | 


--------------------------------------------------------------------------------
/src/markdown/components/relative-time.md:
--------------------------------------------------------------------------------
 1 | # Relative-Time
 2 | 
 3 | The `Relative-Time` component creates a relative text representation of a
 4 | date value. This is almost entirely based on Github's [Time Elements][0].
 5 | 
 6 | ## Demo
 7 | 
 8 | <div class="example">
 9 |   <tonic-relative-time
10 |     date="${new Date()}"
11 |     refresh="1e4"
12 |     locale="en"
13 |   </tonic-relative-time>
14 | </div>
15 | 
16 | ## Code
17 | 
18 | #### HTML
19 | 
20 | ```html
21 | <tonic-relative-time
22 |   date="${new Date()}"
23 |   refresh="1e4"
24 |   locale="en"
25 | </tonic-relative-time>
26 | ```
27 | 
28 | ## Api
29 | 
30 | ### Properties
31 | 
32 | | Property | Type | Description | Default |
33 | | :--- | :--- | :--- | :--- |
34 | | `locale` | *string* | Represents a Unicode locale identifier. | `default` |
35 | | `date` | *string*, *Date* | A valid javascript date object or a parsable javascript date string. | `new Date()` |
36 | 
37 | [0]:https://github.com/github/time-elements
38 | 


--------------------------------------------------------------------------------
/src/markdown/components/router.md:
--------------------------------------------------------------------------------
 1 | # Router
 2 | The `Router` component will render its children components if the browser's current URL matches its `path` property. This component will detect `pushstate`, `popstate`, and `replacestate` events and re-render with the attributes of the URL as props.
 3 | 
 4 | ## Demo
 5 | 
 6 | <div class="example">
 7 |   <tonic-select
 8 |     id="tonic-router-select"
 9 |     value="/"
10 |     label="Select a URL">
11 |     <option value="/examples.html">/</option>
12 |     <option value="/bar/100">/bar/100</option>
13 |     <option value="/beepboop">/beepboop</option>
14 |   </tonic-select>
15 |   <tonic-router id="page1" path="/examples.html">
16 |     <i>Hello, World</i>
17 |   </tonic-router>
18 |   <tonic-router id="page2" path="/bar/:number">
19 |     <b>number</b> prop has the value <b id="page2-number"></b>.
20 |   </tonic-router>
21 |   <tonic-router>
22 |     404
23 |   </tonic-router>
24 | </div>
25 | 
26 | ## Code
27 | 
28 | #### HTML
29 | 
30 | ```html
31 | <tonic-router id="page1" path="/examples.html">
32 |   <i>Hello, World</i>
33 | </tonic-router>
34 | 
35 | <tonic-router id="page2" path="/bar/:number">
36 |   <b>number</b> prop has the value <b id="page2-number"></b>.
37 | </tonic-router>
38 | 
39 | <tonic-router none>404</tonic-router>
40 | ```
41 | 
42 | ## Api
43 | 
44 | ### Properties
45 | 
46 | | Property | Type | Description | Default |
47 | | :--- | :--- | :--- | :--- |
48 | | `path` | *string* | A tokenized string to match against the current url, `/books/:book` for example. | |
49 | | `none` | *string* | If specified, and no matches have been made so far, this component will render. | |
50 | | `id` | *string* | If specified, provides a way to reference the component instance and listen for events on it. | |
51 | 
52 | 
53 | ### Events
54 | 
55 | | Name | Description |
56 | | :--- | :--- |
57 | | `match` | Emitted when a content section receives the `show` class because it matches the current url. |
58 | 


--------------------------------------------------------------------------------
/src/markdown/components/select.md:
--------------------------------------------------------------------------------
 1 | # Select
 2 | 
 3 | The `Select` component creates a select input.
 4 | 
 5 | ## Demo
 6 | 
 7 | <div class="example">
 8 |   <tonic-select name="select" label="Select an Option" id="options-example-1">
 9 |     <option value="a">Option A</option>
10 |     <option value="b">Option B</option>
11 |     <option value="c">Option C</option>
12 |   </tonic-select>
13 | </div>
14 | 
15 | ## Code
16 | 
17 | #### HTML
18 | ```html
19 | <tonic-select name="select">
20 |   <option value="a">Option A</option>
21 |   <option value="b">Option B</option>
22 |   <option value="c">Option C</option>
23 | </tonic-select>
24 | ```
25 | 
26 | ## API
27 | 
28 | ### Properties
29 | 
30 | | Property | Type | Description | Default |
31 | | :--- | :--- | :--- | :--- |
32 | | `id` | *string* | Select box with `id` attribute. | |
33 | | `required` | *boolean* | Makes the select box required. | `false` |
34 | | `disabled` | *boolean* | Makes the select box disabled. | `false` |
35 | | `label` | *string* | Adds a label to the select box. | |
36 | | `width` | *string* | Width of the select box. | `250px` |
37 | | `height` | *string* | Height of the select box. | |
38 | | `radius` | *string* | Radius of the select box. | `2px` |
39 | | `multiple` | *boolean* | Show as multiple select. | |
40 | | `size` | *string* | The number of visible items for a multiple select. |  |
41 | | `value` | *string* | The default value that will be selected. | |
42 | | `tabindex` | *number* | Add a `tabindex` for the select box. | |
43 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
44 | 
45 | ### Instance Methods
46 | 
47 | | Method | Description |
48 | | :--- | :--- |
49 | | `change()` | The native `change` event on the select input. |
50 | | `loading(state)` | Adds loading to the current select box. | |
51 | 
52 | ### Instance Members
53 | 
54 | | Property | Description |
55 | | :--- | :--- |
56 | | `option` | A getter/setter that provides the currently selected option from the select input inside the component. |
57 | | `value` | A getter/setter that provides the current value of the select input from inside of the component. |
58 | | `selectedIndex` | A getter/setter that provides the selected index of the select input inside the component. |
59 | 


--------------------------------------------------------------------------------
/src/markdown/components/split.md:
--------------------------------------------------------------------------------
 1 | # Split
 2 | 
 3 | A resizable `Split` component that can contain any number of deeply nested
 4 | splits or child components (doesn't currently work on mobile).
 5 | 
 6 | ## Demo
 7 | 
 8 | <div class="example split">
 9 | <style>
10 | .example.split {
11 |   border: 1px solid var(--tonic-border);
12 |   height: 250px;
13 | }
14 | .example.split section {
15 |   position: absolute;
16 |   top: 50%; left: 50%;
17 |   transform: translate(-50%, -50%);
18 | }
19 | </style>
20 | <tonic-split id="split-main" type="vertical">
21 |   <tonic-split-left width="40%">
22 |     <tonic-split id="split-js" type="horizontal">
23 |       <tonic-split-top height="60%">
24 |         <section>
25 |           Hello, World.
26 |         </section>
27 |       </tonic-split-top>
28 |       <tonic-split-bottom height="40%">
29 |         <section>
30 |           Hello, World.
31 |         </section>
32 |       </tonic-split-bottom>
33 |     </tonic-split>
34 |   </tonic-split-left>
35 |   <tonic-split-right width="60%">
36 |     <section>
37 |       <tonic-button>Hello</tonic-button>
38 |     </section>
39 |   </tonic-split-right>
40 | </tonic-split>
41 | </div>
42 | 
43 | ## Code
44 | 
45 | #### HTML
46 | 
47 | ```
48 | <tonic-split id="split-main" type="vertical">
49 |   <tonic-split-left width="40%">
50 |     <tonic-split id="split-secondary" type="horizontal">
51 |       <tonic-split-top height="60%">
52 |         <section>
53 |           Hello, World.
54 |         </section>
55 |       </tonic-split-top>
56 |       <tonic-split-bottom height="40%">
57 |         <section>
58 |           Hello, World.
59 |         </section>
60 |       </tonic-split-bottom>
61 |     </tonic-split>
62 |   </tonic-split-left>
63 |   <tonic-split-right width="60%">
64 |     <section>
65 |       Hello, World.
66 |     </section>
67 |   </tonic-split-right>
68 | </tonic-split>
69 | ```
70 | 
71 | ## API
72 | 
73 | ### Properties
74 | 
75 | | Property | Type | Description | Default |
76 | | :--- | :--- | :--- | :--- |
77 | | `id` | *string* | Select box with `id` attribute. | |
78 | | `width` | *string* | Width of the select box. | `250px` |
79 | | `height` | *string* | Height of the select box. | |
80 | 
81 | ### Instance Methods
82 | 
83 | | Method | Description |
84 | | :--- | :--- |
85 | | `toggle(panel, force)` | Show or hide an area of the split. For a `vertical` split, `panel` will be `top` or `bottom`. For a `horizontal` split, `panel` will be `left` or `right`. The boolean `force` parameter will force it to show (true) or hide (false). |
86 | 
87 | ### Instance Members
88 | 
89 | | Property | Description |
90 | | :--- | :--- |
91 | | `meta` | Gives you some information about the state of the split. |
92 | 


--------------------------------------------------------------------------------
/src/markdown/components/sprite.md:
--------------------------------------------------------------------------------
 1 | # Sprite
 2 | 
 3 | The `Sprite` component produces an inline svg that contains symbols
 4 | which can be referred to by other components.
 5 | 
 6 | You should include the `tonic-sprite` once, somewhere in the body, but before
 7 | other components that use it.
 8 | 
 9 | #### HTML
10 | ```html
11 | <tonic-sprite></tonic-sprite>
12 | ```
13 | 
14 | ---
15 | 
16 | To use a symbol from another component, you can refer to the symbol by its `id`
17 | property, for example...
18 | 
19 | #### JS
20 | ```js
21 | class MyComponent extends Tonic {
22 |   render () {
23 |     return this.html`
24 |       <tonic-icon symbol-id="close" size="40px"></tonic-icon>
25 |     `
26 |   }
27 | }
28 | ```
29 | 


--------------------------------------------------------------------------------
/src/markdown/components/tabs.md:
--------------------------------------------------------------------------------
  1 | # Tabs
  2 | The `tonic-tabs` and `tonic-tab-panel` components create a tab list that activates sections when clicked on.
  3 | 
  4 | ## Demo
  5 | 
  6 | <div class="example">
  7 |   <tonic-tabs selected="tab-2" id="tabs-a">
  8 |     <tonic-tab
  9 |       id="tab-1"
 10 |       for="tab-panel-1">One</tonic-tab>
 11 |     <tonic-tab
 12 |       id="tab-2"
 13 |       for="tab-panel-2">Two</tonic-tab>
 14 |     <tonic-tab
 15 |       id="tab-3"
 16 |       for="tab-panel-3">Three</tonic-tab>
 17 |   </tonic-tabs>
 18 |   <tonic-tab-panel id="tab-panel-1">
 19 |     Content One
 20 |   </tonic-tab-panel>
 21 |   <tonic-tab-panel id="tab-panel-2">
 22 |     Content Two
 23 |   </tonic-tab-panel>
 24 |   <tonic-tab-panel id="tab-panel-3">
 25 |     Content Three
 26 |   </tonic-tab-panel>
 27 | </div>
 28 | 
 29 | ## Code
 30 | 
 31 | The tabs are grouped under the `tonic-tabs` component. Each tab should be a
 32 | `tonic-tab` element, and is associated with a `tonic-tab-panel` id with the
 33 | `for` element.
 34 | 
 35 | The selected tab should be specified by providing an `id` as the value
 36 | for the `selected` attribute on the `tonic-tabs` component.
 37 | 
 38 | #### HTML
 39 | ```html
 40 | <tonic-tabs selected="tab-2" id="my-tabs">
 41 |   <tonic-tab
 42 |     id="tab-1"
 43 |     for="tab-panel-1">
 44 |     One
 45 |   </tonic-tab>
 46 |   <tonic-tab
 47 |     id="tab-2"
 48 |     for="tab-panel-2">
 49 |     Two
 50 |   </tonic-tab>
 51 |   <tonic-tab
 52 |     id="tab-3"
 53 |     for="tab-panel-3">
 54 |     Three
 55 |   </tonic-tab>
 56 | </tonic-tabs>
 57 | ```
 58 | 
 59 | ---
 60 | 
 61 | #### HTML
 62 | 
 63 | ```html
 64 | <tonic-tab-panel id="tab-panel-1">
 65 |   Content One
 66 | </tonic-tab-panel>
 67 | 
 68 | <tonic-tab-panel id="tab-panel-2">
 69 |   Content Two
 70 | </tonic-tab-panel>
 71 | 
 72 | <tonic-tab-panel id="tab-panel-3">
 73 |   Content Three
 74 | </tonic-tab-panel>
 75 | ```
 76 | 
 77 | ## API
 78 | 
 79 | ### Properties
 80 | 
 81 | *for `tonic-tabs`*
 82 | 
 83 | | Property | Type | Description | Default |
 84 | | :--- | :--- | :--- | :--- |
 85 | | `selected` | *string* | Adds the `id` attribute. | |
 86 | 
 87 | *for `tonic-tab`*
 88 | 
 89 | | Property | Type | Description | Default |
 90 | | :--- | :--- | :--- | :--- |
 91 | | `id` | *string* | Adds the `id` attribute. <span class="req">required</span> | |
 92 | | `for` | *string* | Adds the `id` attribute. <span class="req">required</span> | |
 93 | 
 94 | *for `tonic-tab-panel`*
 95 | 
 96 | | Property | Type | Description | Default |
 97 | | :--- | :--- | :--- | :--- |
 98 | | `id` | *string* | Adds the `id` attribute. <span class="req">required</span> | |
 99 | 
100 | ### Instance Methods & Members
101 | 
102 | *for `tonic-tabs`*
103 | 
104 | | Method | Description |
105 | | :--- | :--- |
106 | | `click()` | Click event. |
107 | | `get value` | Get the currently selected tab. |
108 | | `set selected(String)` | Set the currently selected tab. |
109 | 
110 | ### Events
111 | 
112 | *for `tonic-tabs`*
113 | 
114 | | Event | Description |
115 | | :--- | :--- |
116 | | `tabvisible` | Emitted when a tab becomes visible. Contains `event.detail.id` for which tab is visible. |
117 | | `tabhidden` | Emitted when a tab becomes hidden. Contains `event.detail.id` for which tab is hidden. |
118 | | `tabvisible`, `tabhidden` | Emitted when a tab is changed and gets triggered both from click & keyboard events. |
119 | 


--------------------------------------------------------------------------------
/src/markdown/components/textarea.md:
--------------------------------------------------------------------------------
 1 | # Textarea
 2 | 
 3 | The `Textarea` component creates a text area.
 4 | 
 5 | ## Demo
 6 | 
 7 | <div class="example">
 8 |   <tonic-textarea id="textarea-a" label="Text Area" rows="6" placeholder="Type in me">It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way—in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</tonic-textarea>
 9 | </div>
10 | 
11 | ## Code
12 | 
13 | #### Html
14 | ```html
15 | <tonic-textarea
16 |   placeholder="Placeholder"
17 |   rows="6"
18 |   id="my-textarea"
19 |   label="Text Area">
20 |   <!-- Content Goes Here -->
21 | </tonic-textarea>
22 | ```
23 | 
24 | ## Api
25 | 
26 | ### Properties
27 | 
28 | | Property | Type | Description | Default |
29 | | :--- | :--- | :--- | :--- |
30 | | `id` | *string* | Text area with `id` attribute. <span class="req">required</span> |
31 | | `ariaLabelledby` | *string* | Sets the `area-labelledby` attribute. |  |
32 | | `autofocus` | *boolean* | Enable `autofocus` on the text area. | `false` |
33 | | `cols` | *string* | Set number of columns. |  |
34 | | `disabled` | *boolean* | Text area with `disabled` attribute. | `false` |
35 | | `height` | *string* | Set height of text area. | `100%` |
36 | | `label` | *string* | Creates a label. |  |
37 | | `maxlength` | *string* | Set the maximum character length. |  |
38 | | `minlength` | *string* | Set the minimum character length. |  |
39 | | `name` | *string* | Text area with `name` attribute. | |
40 | | `persistSize` | *boolean* | Persist the resized width and height | `false` |
41 | | `placeholder` | *string* | Add placeholder to text area. |  |
42 | | `radius` | *string* | Set radius of text area. | `2px` |
43 | | `readonly` | *boolean* | Set text area to `readonly`. | `false` |
44 | | `required` | *boolean* | Set text area to `required`. | `false` |
45 | | `resize` | *string* | Set to `none` to disable resize. | |
46 | | `rows` | *string* | Set number of rows. |  |
47 | | `spellcheck` | *boolean* | Enable spellcheck. | `true` |
48 | | `tabindex` | *number* | Add a `tabindex` for the text area. | |
49 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
50 | | `width` | *string* | Set width of text area. |  |
51 | 
52 | ### Instance Methods & Members
53 | 
54 | | Method | Description |
55 | | :--- | :--- |
56 | | `value` | A getter/setter that provides the current value of the text area from inside of the component. |
57 | 


--------------------------------------------------------------------------------
/src/markdown/components/toaster-inline.md:
--------------------------------------------------------------------------------
 1 | # ToasterInline
 2 | The `ToasterInline` component creates an inline toaster item that appears on the
 3 | screen either for a duration or until the user acknowledges it.
 4 | 
 5 | > *__Note:__ This component requires the `tonic-sprite` component.*
 6 | 
 7 | ## Demo
 8 | 
 9 | <div class="example">
10 |   <tonic-button
11 |     id="toaster-link-1"
12 |     value="notify">
13 |     Notify Me
14 |   </tonic-button>
15 | </div>
16 | 
17 | <div>
18 |   <tonic-toaster-inline
19 |     id="toaster-1"
20 |     display="false"
21 |     dismiss="true"
22 |     type="danger"
23 |     message="Message as a property.">
24 |   </tonic-toaster-inline>
25 |   <tonic-toaster-inline id="toaster-3" display="true">
26 |     <b>Hello,
27 |     World</b>
28 |   </tonic-toaster-inline>
29 | </div>
30 | 
31 | ## Code
32 | 
33 | #### HTML
34 | ```html
35 | <tonic-toaster-inline id="toaster-1">
36 | </tonic-toaster-inline>
37 | ```
38 | 
39 | #### JS
40 | ```js
41 | const toaster1 = document.getElementById('toaster-1')
42 | const toasterLink1 = document.getElementById('toaster-link-1')
43 | 
44 | toasterLink1.addEventListener('click', e => {
45 |   toaster1.show()
46 | })
47 | ```
48 | 
49 | ---
50 | 
51 | An inline toaster that is displayed initially:
52 | 
53 | #### HTML
54 | ```html
55 | <tonic-toaster-inline
56 |   id="toaster-2"
57 |   dismiss="false"
58 |   display="true">
59 |   Displayed initially. Uses HTML.
60 | </tonic-toaster-inline>
61 | ```
62 | 
63 | NOTE: An inline toaster item that is displayed initially must declare each property in the HTML and display it using `display="true"`. This will create the notification.
64 | 
65 | Otherwise, the properties for the toaster item to be created must be specified in the javascript, where it is created.
66 | 
67 | ## Api
68 | 
69 | ### Properties
70 | 
71 | | Property | Type | Description | Default |
72 | | :--- | :--- | :--- | :--- |
73 | | `id` | *string* | Adds an `id` attribute. |  |
74 | | `name` | *string* | Adds a `name` attribute. |  |
75 | | `title` | *string* | Adds a title. |  |
76 | | `message` | *string* | Adds a message. If no message attribute is provided the inner HTML will be used. |  |
77 | | `type` | *string* | Adds an alert type, `success`, `warning`, `danger` or `info`). |  |
78 | | `duration` | *number* | The duration that the component will be displayed before being hidden. |  |
79 | | `dismiss` | *boolean* | If set to `false`, the close button will not be added to the toaster item. |  |
80 | | `display` | *boolean* | Specifies whether toaster is displayed initially. | `false` |
81 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
82 | 
83 | ### Instance Methods & Members
84 | 
85 | | Method | Description |
86 | | :--- | :--- |
87 | | `show()` | Shows the toaster. |
88 | | `hide()` | Hides a toaster item. |
89 | | `click()` | Removes a toaster item. |
90 | 


--------------------------------------------------------------------------------
/src/markdown/components/toaster.md:
--------------------------------------------------------------------------------
 1 | # Toaster
 2 | The `Toaster` component creates a container for all toaster items to be added to.
 3 | 
 4 | > *__Note:__ This component requires the `tonic-sprite` component.*
 5 | 
 6 | ## Demo
 7 | 
 8 | <tonic-toaster></tonic-toaster>
 9 | <div class="example">
10 |   <tonic-button
11 |     id="tonic-toaster-example"
12 |     value="notify-me">
13 |     Notify Me
14 |     </tonic-button>
15 | </div>
16 | 
17 | ## Code
18 | 
19 | The following code should be included once on the page:
20 | 
21 | #### HTML
22 | ```html
23 | <tonic-toaster id="tonic-toaster-example"></tonic-toaster>
24 | ```
25 | 
26 | ---
27 | 
28 | To create a new toaster item:
29 | 
30 | #### JS
31 | ```js
32 | const notification = document.querySelector('tonic-toaster')
33 | 
34 | document
35 |   .getElementById('tonic-toaster-example')
36 |   .addEventListener('click', e => {
37 |     notification.create({
38 |       type: 'success',
39 |       title: 'Greetings',
40 |       message: 'Hello, World'
41 |     })
42 |   })
43 | ```
44 | 
45 | ## Api
46 | 
47 | ### Properties
48 | 
49 | | Property | Type | Description | Default |
50 | | :--- | :--- | :--- | :--- |
51 | | `id` | *string* | Adds an `id` attribute. |  |
52 | | `name` | *string* | Adds a `name` attribute. |  |
53 | | `type` | *string* | Adds an alert type (`success`, `warning`, `danger`, `info`). |  |
54 | | `title` | *string* | Adds a title. |  |
55 | | `message` | *string* | Adds a message. |  |
56 | | `dismiss` | *boolean* | If set to `false`, the close button will not be added to the toaster. | `true` |
57 | | `duration` | *number* | Adds a duration. | `center` |
58 | | `position` | *string* | (On Parent `tonic-toaster` Element) Position of the toaster items, can be `left`, `right` or `center`. | `center` |
59 | | `theme` | *string* | (On Parent `tonic-toaster` Element) Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
60 | 
61 | ### Instance Methods & Members
62 | 
63 | | Method | Description |
64 | | :--- | :--- |
65 | | `click()` | Removes a toaster item. |
66 | | `create()` | Creates a toaster item. |
67 | | `destroy()` | Removes a toaster item. |
68 | 


--------------------------------------------------------------------------------
/src/markdown/components/toggle.md:
--------------------------------------------------------------------------------
 1 | # Toggle
 2 | 
 3 | The `Toggle` component creates a toggle.
 4 | 
 5 | ## Demo
 6 | 
 7 | <div class="example">
 8 |   <tonic-toggle
 9 |     id="toggle-example"
10 |     checked="true"
11 |     label="Change">
12 |   </tonic-toggle>
13 | </div>
14 | 
15 | ## Code
16 | 
17 | #### HTML
18 | ```html
19 | <tonic-toggle
20 |   id="toggle-example"
21 |   label="Change">
22 | </tonic-toggle>
23 | ```
24 | 
25 | ## Api
26 | 
27 | ### Properties
28 | 
29 | | Property | Type | Description | Default |
30 | | :--- | :--- | :--- | :--- |
31 | | `id` | *string* | Adds the <code>id</code> attribute <span class="req">required</span> | |
32 | | `name` | *string* | Adds the <code>name</code> attributes. | |
33 | | `disabled` | *boolean* | Makes the toggle disabled. | `false` |
34 | | `checked` | *boolean* | Turns the toggle "on". | `false` |
35 | | `label` | *string* | Adds a label to the toggle | |
36 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
37 | 
38 | ### Instance Methods
39 | 
40 | | Method | Description |
41 | | :--- | :--- |
42 | | `change()` | Bind to `change` event. |
43 | 
44 | ### Instance Members
45 | 
46 | | Method | Description |
47 | | :--- | :--- |
48 | | `value` | A getter/setter that returns the current value (state) of the toggle. |
49 | 


--------------------------------------------------------------------------------
/src/markdown/components/tooltip.md:
--------------------------------------------------------------------------------
 1 | # Tooltip
 2 | 
 3 | The `Tooltip` component creates a dynamically positioned pop-up tooltip filled with custom content that shows during the `hover` state of the corresponding trigger element.
 4 | 
 5 | ## Demo
 6 | 
 7 | <div class="example">
 8 |   <span id="tonic-tooltip-example">
 9 |     Hover over this text
10 |   </span>
11 |   <tonic-tooltip for="tonic-tooltip-example">
12 |     <img src="https://socketsupply.co/images/monogram.png" width="180px">
13 |   </tonic-tooltip>
14 | </div>
15 | 
16 | ## Code
17 | 
18 | The element that will be used to trigger the display of the tooltip must contain an `id` that matches the `for` attribute on the `tonic-tooltip` element.
19 | 
20 | #### HTML
21 | ```html
22 | <span id="tonic-tooltip-example">Hover over this text</span>
23 | 
24 | <tonic-tooltip for="tonic-tooltip-example">
25 |   <img src="https://socketsupply.co/images/monogram.png" width="100px">
26 | </tonic-tooltip>
27 | ```
28 | 
29 | ## Api
30 | 
31 | ### Properties
32 | 
33 | | Property | Type | Description | Default |
34 | | :--- | :--- | :--- | :--- |
35 | | `for` | *string* | Adds a `for` attribute. <span class="req">required</span> |  |
36 | | `width` | *string* | Changes the `width` style. |  |
37 | | `height` | *string* | Changes `height` style. |  |
38 | | `theme` | *string* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
39 | 
40 | ### Instance Methods & Members
41 | 
42 | | Method | Description |
43 | | :--- | :--- |
44 | | `show()` | Shows the tooltip. |
45 | | `hide()` | Hides the tooltip. |
46 | 


--------------------------------------------------------------------------------
/src/markdown/components/windowed.md:
--------------------------------------------------------------------------------
 1 | # Windowed
 2 | A base class is used for creating a windowed component.
 3 | 
 4 | If you need to render large data sets (hundreds of thousands of rows for example), you can use a technique known as `windowing`. This technique renders a subset of your data while giving the user the impression that all the data
 5 | has been rendered.
 6 | 
 7 | ## Demo
 8 | 
 9 | This demo generates the data after you click the overlay. Generating 500000 rows of data can take a second or two.
10 | 
11 | <div class="example full-width">
12 |   <div id="click-to-load">
13 |     <span>Click to Load</span>
14 |   </div>
15 |   <example-windowed id="windowed" row-height=30>
16 |   </example-windowed>
17 | </div>
18 | 
19 | ## Code
20 | 
21 | #### HTML
22 | 
23 | ```html
24 | <example-windowed row-height=30>
25 | </example-windowed>
26 | ```
27 | 
28 | ## Api
29 | 
30 | ### Properties
31 | 
32 | | Property | Type | Description | Default |
33 | | :--- | :--- | :--- | :--- |
34 | | `row-height` | *Number* | Sets the height of each row. <span class="req">required</span> | `30` |
35 | | `rows-page-page` | *Number* | The total number of rows per page to render. | `100` |
36 | | `height` | *String* | Sets the height of the outer container. | `inherit` |
37 | | `theme` | *String* | Adds a theme color (`light`, `dark` or whatever is defined in your base CSS. | `light` |
38 | | `debug` | *Boolean* | Add alternating page colors. | `false` |
39 | 
40 | ### Instance Methods
41 | 
42 | | Method | Description |
43 | | :--- | :--- |
44 | | `load(Array)` | Loads an array of data. |
45 | | `loaded()` | Called after the load function has been called. |
46 | | `getRows()` | Returns an array of all rows that are currently loaded. |
47 | | `getRow(Number)` | Get a row of data (returns an awaitable promise). |
48 | 
49 | ### Instance Methods For Implementers
50 | | Method | Description |
51 | | :--- | :--- |
52 | | `render()` | Render the component, calling `super.render()` will render the row container structure. |
53 | | `renderEmptyState()` | If implemented, should return a structure that represents a state where there are no rows. |
54 | | `renderLoadingState()` | If implemented, should return a structure that represents a state that has not yet been  completed. |
55 | 


--------------------------------------------------------------------------------
/src/markdown/guides/composition.md:
--------------------------------------------------------------------------------
  1 | # Composition
  2 | 
  3 | ### Nesting
  4 | 
  5 | With `Tonic` you can nest templates from other functions or methods.
  6 | 
  7 | ```js
  8 | class MyPage {
  9 |   renderHeader () {
 10 |     return this.html`<h1>Header</h1>`
 11 |   }
 12 |   render () {
 13 |     return this.html`
 14 |       ${this.renderHeader()}
 15 |       <main>My page</main>
 16 |     `
 17 |   }
 18 | }
 19 | ```
 20 | 
 21 | This means you can break up your `render() {}` method into multiple
 22 | methods or re-usable functions.
 23 | 
 24 | ### Conditionals
 25 | 
 26 | If you want to do conditional rendering you can use if statements.
 27 | 
 28 | ```js
 29 | const LoginPage {
 30 |   render () {
 31 |     let message = 'Please Log in'
 32 |     if (this.props.user) {
 33 |       message = this.html`<div>Welcome ${this.props.user.name}</div>`
 34 |     }
 35 | 
 36 |     return this.html`<div class="message">${message}</div>`
 37 |   }
 38 | }
 39 | ```
 40 | 
 41 | ### Children
 42 | 
 43 | Once you add components, they can be nested any way you want. The
 44 | property `this.children` will get this component's child elements
 45 | so that you can read, mutate or wrap them.
 46 | 
 47 | ```js
 48 | class ParentComponent extends Tonic {
 49 |   render () {
 50 |     return this.html`
 51 |       <div class="parent">
 52 |         <another-component>
 53 |           ${this.children}
 54 |         </another-component>
 55 |       </div>
 56 |     `
 57 |   }
 58 | }
 59 | 
 60 | Tonic.add(ParentComponent)
 61 | 
 62 | class ChildComponent extends Tonic {
 63 |   render () {
 64 |     return this.html`
 65 |       <div class="child">
 66 |         ${this.props.value}
 67 |       </div>
 68 |     `
 69 |   }
 70 | }
 71 | 
 72 | Tonic.add(ChildComponent)
 73 | ```
 74 | 
 75 | ### Input HTML
 76 | 
 77 | ```html
 78 | <parent-component>
 79 |   <child-component value="hello world"></child-component>
 80 | </parent-component>
 81 | ```
 82 | 
 83 | ### Output HTML
 84 | 
 85 | ```html
 86 | <parent-component>
 87 |   <div class="parent">
 88 |     <another-component>
 89 |       <child-component>
 90 |         <div class="child">hello world</div>
 91 |       </child-component>
 92 |     </another-component>
 93 |   </div>
 94 | </parent-component>
 95 | ```
 96 | 
 97 | ### Repeating templates
 98 | 
 99 | You can embed an array of template results using `this.html`
100 | 
101 | ```js
102 | class TodoList extends Tonic {
103 |   render () {
104 |     const todos = this.state.todos
105 | 
106 |     const lis = []
107 |     for (const todo of todos) {
108 |       lis.push(this.html`<li>${todo.value}</li>`)
109 |     }
110 | 
111 |     return this.html`<ul>${lis}</ul>`
112 |   }
113 | }
114 | ```
115 | 
116 | By using an array of template results, tonic will render your
117 | repeating templates for you.
118 | 


--------------------------------------------------------------------------------
/src/markdown/guides/csp.md:
--------------------------------------------------------------------------------
 1 | # CSP
 2 | 
 3 | Tonic is `Content Security Policy` friendly. [This][0] is a good introduction to
 4 | `CSP`s if you're not already familiar with how they work. This is an example policy,
 5 | it's quite liberal, in a real app you would want these rules to be more specific.
 6 | 
 7 | ```html
 8 | <meta
 9 |   http-equiv="Content-Security-Policy"
10 |   content="
11 |     default-src 'self';
12 |     font-src 'self' https:;
13 |     img-src 'self' https: data:;
14 |     style-src 'self' 'nonce-123' https:;
15 |     script-src 'self' 'nonce-123';
16 |     connect-src 'self' https:;">
17 | ```
18 | 
19 | For `Tonic` to work with a CSP, you need to set the [`nonce`][1] property. For
20 | example, given the above policy you would add the following to your javascript...
21 | 
22 | ```js
23 | Tonic.nonce = 'c213ef6'
24 | ```
25 | 
26 | [0]:https://developers.google.com/web/fundamentals/security/csp/
27 | [1]:https://en.wikipedia.org/wiki/Cryptographic_nonce
28 | 


--------------------------------------------------------------------------------
/src/markdown/guides/events.md:
--------------------------------------------------------------------------------
  1 | # Events
  2 | There are two kinds of events. `Lifecycle Events` and `Interaction Events`.
  3 | Tonic uses the regular web component lifecycle events but improves on them,
  4 | see the API section for more details.
  5 | 
  6 | Tonic helps you capture interaction events without turning your html into
  7 | property spaghetti. It also helps you organize and optimize it.
  8 | 
  9 | ```js
 10 | class Example extends Tonic {
 11 |   //
 12 |   // You can listen to any DOM event that happens in your component
 13 |   // by creating a method with the corresponding name. The method will
 14 |   // receive the plain old Javascript event object.
 15 |   //
 16 |   mouseover (e) {
 17 |     // ...
 18 |   }
 19 | 
 20 |   change (e) {
 21 |     // ...
 22 |   }
 23 | 
 24 |   willConnect () {
 25 |     // The component will connect.
 26 |   }
 27 | 
 28 |   connected () {
 29 |     // The component has rendered.
 30 |   }
 31 | 
 32 |   disconnected () {
 33 |     // The component has disconnected.
 34 |   }
 35 | 
 36 |   updated () {
 37 |     // The component has re-rendered.
 38 |   }
 39 | 
 40 |   click (e) {
 41 |     //
 42 |     // You may want to check which element in the component was actually
 43 |     // clicked. You can also check the `e.path` attribute to see what was
 44 |     // clicked (helpful when handling clicks on top of SVGs).
 45 |     //
 46 |     if (!e.target.matches('.parent')) return
 47 | 
 48 |     // ...
 49 |   }
 50 | 
 51 |   render () {
 52 |     return this.html`<div></div>`
 53 |   }
 54 | }
 55 | ```
 56 | 
 57 | The convention of most frameworks is to attach individual event listeners,
 58 | such as `onClick={myHandler()}` or `click=myHandler`. In the case where
 59 | you have a table with 2000 rows, this would create 2000 individual listeners.
 60 | 
 61 | Tonic prefers the [event delegation][5] pattern. With event delegation, we
 62 | attach a **single event listener** and watch for interactions on the child
 63 | elements of a component. With this approach, fewer listeners are created and we
 64 | do not need to rebind them when the DOM is re-created.
 65 | 
 66 | Each event handler method will receive the plain old Javascript `event` object.
 67 | This object contains a `target` property, the exact element that was clicked.
 68 | The `path` property is an array of elements containing the exact hierarchy.
 69 | 
 70 | Some helpful native DOM APIs for testing the properties of an element:
 71 | -   [`Element.matches(String)`][6] tests if an element matches a selector
 72 | -   [`Element.closest(String)`][7] finds the closest ancestor from the element
 73 | that matches the given selector
 74 | 
 75 | Tonic also provides a helper function that checks if the element matches the
 76 | selector, and if not, tries to find the closest match.
 77 | 
 78 | ```js
 79 | Tonic.match(el, 'selector')
 80 | ```
 81 | 
 82 | You can attach an event handler in any component, for example here
 83 | we attach an event handler in a `ParentElement` component that handles
 84 | clicks from DOM elements in `ChildElement`.
 85 | 
 86 | ### Example
 87 | ```js
 88 | class ChildElement extends Tonic {
 89 |   render () {
 90 |     return this.html`
 91 |       <span data-event="click-me" data-bar="true">Click Me</span>
 92 |     `
 93 |   }
 94 | }
 95 | 
 96 | class ParentElement extends Tonic {
 97 |   click (e) {
 98 |     const el = Tonic.match(e.target, '[data-event]')
 99 | 
100 |     if (el.dataset.event === 'click-me') {
101 |       console.log(el.dataset.bar)
102 |     }
103 |   }
104 | 
105 |   render () {
106 |     return this.html`
107 |       <child-element>
108 |       </child-element>
109 |     `
110 |   }
111 | }
112 | ```
113 | 
114 | The event object has an [`Event.stopPropagation()`][8] method that is useful for
115 | preventing an event from bubbling up to parent components. You may also be
116 | interested in the [`Event.preventDefault()`][9] method.
117 | 
118 | [5]:https://davidwalsh.name/event-delegate
119 | [6]:https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
120 | [7]:https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
121 | [8]:https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
122 | [9]:https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
123 | [10]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
124 | 


--------------------------------------------------------------------------------
/src/markdown/guides/gettingstarted.md:
--------------------------------------------------------------------------------
  1 | # Getting Started
  2 | 
  3 | Building a component with Tonic starts by creating a function or a class.
  4 | The class should have at least one method named *render* which returns a template literal
  5 | of HTML.
  6 | 
  7 | ```js
  8 | import Tonic from '@socketsupply/tonic'
  9 | 
 10 | class MyGreeting extends Tonic {
 11 |   render () {
 12 |     return this.html`<div>Hello, World.</div>`
 13 |   }
 14 | }
 15 | ```
 16 | 
 17 | or
 18 | 
 19 | ```
 20 | function MyGreeting () {
 21 |   return this.html`
 22 |     <div>Hello, World.</div>
 23 |   `
 24 | }
 25 | ```
 26 | 
 27 | ---
 28 | 
 29 | The HTML tag for your component will match the class or function name.
 30 | 
 31 | > <i><b>Note</b>: Tonic is a thin wrapper around `web components`. Web
 32 | > components require a name with two or more parts. So your class name should
 33 | > be `CamelCased` (starting with an uppercase letter). For example, `MyGreeting`
 34 | > becomes `<my-greeting></my-greeting>`.</i>
 35 | 
 36 | ---
 37 | 
 38 | Next, register your component with `Tonic.add(ClassName)`.
 39 | 
 40 | ```js
 41 | Tonic.add(MyGreeting)
 42 | ```
 43 | 
 44 | ---
 45 | 
 46 | After adding your Javascript to your HTML, you can use your component anywhere.
 47 | 
 48 | ```html
 49 | <html>
 50 |   <body>
 51 |     <my-greeting></my-greeting>
 52 | 
 53 |     <script src="index.js"></script>
 54 |   </body>
 55 | </html>
 56 | ```
 57 | 
 58 | > <i><b>Note</b>: Custom tags (in all browsers) require a closing tag (even if
 59 | > they have no children). Tonic doesn't add any "magic" to change how this works.</i>
 60 | 
 61 | ---
 62 | 
 63 | When the component is rendered by the browser, the result of your render
 64 | function will be inserted into the component tag.
 65 | 
 66 | ```html
 67 | <html>
 68 |   <head>
 69 |     <script src="index.js"></script>
 70 |   </head>
 71 | 
 72 |   <body>
 73 |     <my-greeting>
 74 |       <div>Hello, World.</div>
 75 |     </my-greeting>
 76 |   </body>
 77 | </html>
 78 | ```
 79 | 
 80 | A component (or its render function) may be an `async` or an `async generator`.
 81 | 
 82 | ```js
 83 | class GithubUrls extends Tonic {
 84 |   async * render () {
 85 |     yield this.html`<p>Loading...</p>`
 86 | 
 87 |     const res = await fetch('https://api.github.com/')
 88 |     const urls = await res.json()
 89 | 
 90 |     return this.html`
 91 |       <pre>
 92 |         ${JSON.stringify(urls, 2, 2)}
 93 |       </pre>
 94 |     `
 95 |   }
 96 | }
 97 | ```
 98 | 
 99 | [0]:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
100 | [1]:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
101 | [2]:https://caniuse.com/#search=domcontentloaded
102 | 


--------------------------------------------------------------------------------
/src/markdown/guides/intro.md:
--------------------------------------------------------------------------------
 1 | <div class="title">
 2 | <h1>A low profile component framework.</h1>
 3 | <tonic-toggle id="dark">
 4 | </tonic-toggle>
 5 | </div>
 6 | <br/>
 7 | 
 8 | <div class="checklists">
 9 |   <ul class="checklist">
10 |     <li>1 file. 1 class. ~350 <a href="https://github.com/socketsupply/tonic">lines of code</a>.</li>
11 |     <li>No build tools required.</li>
12 |     <li>Native web components.</li>
13 |     <li>Ideal for JAM stacks.</li>
14 |   </ul>
15 | 
16 |   <ul class="checklist">
17 |     <li>Identical on client & server.</li>
18 |     <li>Composition oriented.</li>
19 |     <li>Event delegation by default</li>
20 |     <li>Lots of <a href="/examples.html">examples</a>.</li>
21 |   </ul>
22 | 
23 | </div>
24 | 


--------------------------------------------------------------------------------
/src/markdown/guides/methods.md:
--------------------------------------------------------------------------------
 1 | # Methods
 2 | 
 3 | A method is a function of a component. It can help to organize the internal
 4 | logic of a component.
 5 | 
 6 | The [constructor][0] is a special method that is called once each time an
 7 | instance of your component is created.
 8 | 
 9 | ```js
10 | class MyComponent extends Tonic {
11 |   constructor () {
12 |     super()
13 |     // ...
14 |   }
15 | 
16 |   myMethod (n) {
17 |     this.state.number = n
18 |     this.reRender()
19 |   }
20 | 
21 |   render () {
22 |     const n = this.state.number
23 | 
24 |     return this.html`
25 |       <div>
26 |         The number is ${n}
27 |       </div>
28 |     `
29 |   }
30 | }
31 | ```
32 | 
33 | After the component is created, the method `myMethod` can be called.
34 | 
35 | ```js
36 | document.getElementById('foo').myMethod(42)
37 | ```
38 | 
39 | [0]:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
40 | 


--------------------------------------------------------------------------------
/src/markdown/guides/props.md:
--------------------------------------------------------------------------------
  1 | # Properties
  2 | 
  3 | `Props` are properties that are passed to the component in the form of HTML
  4 | attributes. For example...
  5 | 
  6 | ```js
  7 | class MyApp extends Tonic {
  8 |   render () {
  9 |     return this.html`
 10 |       <my-greeting message="Hello, World">
 11 |       </my-greeting>
 12 |     `
 13 |   }
 14 | }
 15 | ```
 16 | 
 17 | ---
 18 | 
 19 | Properties added to a component appear on `this.props` object.
 20 | 
 21 | ---
 22 | 
 23 | Tonic has no templating language, it uses HTML! But since HTML only
 24 | understands string values, we need some help to pass more complex
 25 | values to a component, and for that we use `this.html`.
 26 | 
 27 | ```js
 28 | const foo = {
 29 |   hi: 'Hello, world',
 30 |   bye: 'Goodbye, and thanks for all the fish'
 31 | }
 32 | 
 33 | class MyApp extends Tonic {
 34 |   render () {
 35 |     return this.html`
 36 |       <my-greeting messages="${foo}">
 37 |       </my-greeting>
 38 |     `
 39 |   }
 40 | }
 41 | ```
 42 | 
 43 | ```js
 44 | class MyGreeting extends Tonic {
 45 |   render () {
 46 |     return this.html`
 47 |       <h1>${this.props.messages.hi}</h1>
 48 |     `
 49 |   }
 50 | }
 51 | ```
 52 | 
 53 | > <i><b>Note</b>: A property named `fooBar='30'` will become lowercased
 54 | > (as per the HTML spec). If you want the property name to be camel cased when
 55 | > added to the props object, use `foo-bar='30'` to get `this.props.fooBar`.</i>
 56 | 
 57 | ---
 58 | 
 59 | You can use the "spread" operator to expand object literals into html properties.
 60 | 
 61 | ```js
 62 | class MyComponent extends Tonic {
 63 |   render () {
 64 |     const o = {
 65 |       a: 'testing',
 66 |       b: 2.2,
 67 |       fooBar: 'ok'
 68 |     }
 69 | 
 70 |     return this.html`
 71 |       <some-component ...${o}>
 72 |       </some-component>
 73 | 
 74 |       <div ...${o}>
 75 |       </div>
 76 |     `
 77 |   }
 78 | }
 79 | ```
 80 | 
 81 | The above component renders the following output.
 82 | 
 83 | ```html
 84 | <my-component>
 85 |   <some-component a="testing" b="2.2" foo-bar="ok">
 86 |     <div a="testing" b="2.2" foo-bar="ok">
 87 |     </div>
 88 |   </some-component>
 89 | 
 90 |   <div a="testing" b="2.2" foo-bar="ok">
 91 |   </div>
 92 | </my-component>
 93 | ```
 94 | 
 95 | ### Updating properties
 96 | 
 97 | There is no evidence that Virtual DOMs improve performance across a broad set
 98 | of use cases, but it's certain that they greatly increase complexity. Tonic doesn't
 99 | use them. Instead, we recommend `incremental updates`. Simply put, you re-render a
100 | component when you think the time is right. The rule of thumb is to only re-render
101 | what is absolutely needed.
102 | 
103 | ---
104 | 
105 | To manually update a component you can use the `.reRender()` method. This method
106 | receives either an object or a function. For example...
107 | 
108 | ```js
109 | // Update a component's properties
110 | this.reRender(props => ({
111 |   ...props,
112 |   color: 'red'
113 | }))
114 | 
115 | // Reset a component's properties
116 | this.reRender({ color: 'red' })
117 | 
118 | // Re-render a component with its existing properties
119 | this.reRender()
120 | ```
121 | 
122 | ---
123 | 
124 | The `.reRender()` method can also be called directly on a component.
125 | 
126 | ```js
127 | document.getElementById('parent').reRender({ data: [1,2,3, ...9999] })
128 | ```
129 | 


--------------------------------------------------------------------------------
/src/markdown/guides/ssr.md:
--------------------------------------------------------------------------------
 1 | # Server Side Rendering.
 2 | 
 3 | Tonic components are exactly the same on the server. You don't need
 4 | any build tools or any special treatment. Just use the [`tonic-ssr`][0]
 5 | module (it mocks-up a few dom apis that tonic needs).
 6 | 
 7 | Check out the [`code for this site`][1] for a real life example.
 8 | 
 9 | [0]:https://github.com/socketsupply/tonic-ssr
10 | [1]:https://github.com/socketsupply/tonic-docs
11 | 


--------------------------------------------------------------------------------
/src/markdown/guides/state.md:
--------------------------------------------------------------------------------
 1 | # Component State
 2 | 
 3 | `this.state` is a plain-old javascript object. Its value will be persisted if
 4 | the component is re-rendered. Any element that has an `id` attribute can use
 5 | state, and any component that uses state must have an `id` property.
 6 | 
 7 | ```js
 8 | //
 9 | // Update a component's state
10 | //
11 | this.state.color = 'red'
12 | 
13 | //
14 | // Reset a component's state
15 | //
16 | this.state = { color: 'red' }
17 | ```
18 | 
19 | ```html
20 | <my-app id="my-app"></my-app>
21 | <!-- always set a unique ID if you have multiple elems. -->
22 | <my-downloader id="download-chrome" app="chrome"></my-downloader>
23 | <my-downloader id="download-firefox" app="firefox"></my-downloader>
24 | ```
25 | 
26 | ---
27 | 
28 | Setting the state will *not* cause a component to re-render. This way you can
29 | make incremental updates. Components can be updated independently. And
30 | rendering only happens only when necessary.
31 | 
32 | Remember to clean up! States are just a set of key-value pairs on the `Tonic`
33 | object. So if you create temporary components that use state, clean up their
34 | state after you delete them. For example, if a list of a component with thousands
35 | of temporary child elements all uses state, I should delete their state after
36 | they get destroyed, `delete Tonic._states[someRandomId]`.
37 | 


--------------------------------------------------------------------------------
/src/markdown/guides/styles.md:
--------------------------------------------------------------------------------
 1 | # Styling
 2 | 
 3 | Tonic supports multiple approaches to safely styling components.
 4 | 
 5 | ### Option 1. Inline styles
 6 | 
 7 | Inline styles are a security risk. Tonic provides the `styles()` method so you
 8 | can inline styles safely. Tonic will apply the style properties when the `render()`
 9 | method is called.
10 | 
11 | ```js
12 | class MyGreeting extends Tonic {
13 |   styles () {
14 |     return {
15 |       a: {
16 |         color: this.props.fg,
17 |         fontSize: '30px'
18 |       },
19 |       b: {
20 |         backgroundColor: this.props.bg,
21 |         padding: '10px'
22 |       }
23 |     }
24 |   }
25 | 
26 |   render () {
27 |     return this.html`<div styles="a b">${this.children}</div>`
28 |   }
29 | }
30 | ```
31 | 
32 | ```xml
33 | <my-greeting fg="white" bg="red">Hello, World</my-greeting>
34 | ```
35 | 
36 | ### Option 2. Dynamic Stylesheets
37 | The `stylesheet()` method will add a stylesheet to your component.
38 | 
39 | ```js
40 | class MyGreeting extends Tonic {
41 |   stylesheet () {
42 |     return `
43 |       my-greeting div {
44 |         display: ${this.props.display};
45 |       }
46 |     `
47 |   }
48 | 
49 |   render () {
50 |     return this.html`<div></div>`
51 |   }
52 | }
53 | ```
54 | 
55 | ### Option 3. Static Stylesheets
56 | The static `stylesheet()` method will add a stylesheet to the document,
57 | but only once.
58 | 
59 | ```js
60 | class MyGreeting extends Tonic {
61 |   static stylesheet () {
62 |     return `
63 |       my-greeting div {
64 |         border: 1px dotted #666;
65 |       }
66 |     `
67 |   }
68 | 
69 |   render () {
70 |     return this.html`<div></div>`
71 |   }
72 | }
73 | ```
74 | 


--------------------------------------------------------------------------------
/src/pages/examples.js:
--------------------------------------------------------------------------------
  1 | import fs from 'node:fs/promises'
  2 | import path from 'node:path'
  3 | 
  4 | import Tonic from 'tonic-ssr'
  5 | import head from './mixins/head.js'
  6 | import logo from './mixins/logo.js'
  7 | 
  8 | const base = path.join('..', 'markdown', 'components')
  9 | const __dirname = path.dirname(new URL(import.meta.url).pathname)
 10 | 
 11 | class ExamplePage extends Tonic {
 12 |   async getComponentDocs () {
 13 |     const dir = path.join(__dirname, base)
 14 |     const files = await fs.readdir(dir)
 15 |     return files.map(file => ({
 16 |       name: file.replace('.md', ''),
 17 |       path: path.join(dir, file)
 18 |     }))
 19 |   }
 20 | 
 21 |   renderTableOfContents (files) {
 22 |     const html = []
 23 | 
 24 |     for (const file of files) {
 25 |       html.push(this.html`
 26 |         <a href="#${file.name}">
 27 |           ${file.name}
 28 |         </a>
 29 |       `)
 30 |     }
 31 | 
 32 |     return html
 33 |   }
 34 | 
 35 |   renderFiles (files) {
 36 |     const html = []
 37 | 
 38 |     for (const file of files) {
 39 |       html.push(this.html`
 40 |         <markdown-module src="${file.path}">
 41 |         </markdown-module>
 42 |       `)
 43 |     }
 44 | 
 45 |     return html
 46 |   }
 47 | 
 48 |   async render () {
 49 |     const files = await this.getComponentDocs()
 50 | 
 51 |     const toc = this.renderTableOfContents(files)
 52 |     const content = this.renderFiles(files)
 53 | 
 54 |     return this.html`
 55 |       <!DOCTYPE html>
 56 | 
 57 |       <html>
 58 |         <head>
 59 |           ${Tonic.unsafeRawString(head({
 60 |             title: 'Tonic',
 61 |             description: 'A component framework',
 62 |             siteName: 'Tonic Framework',
 63 |             image: 'https://tonicframework.dev/images/tonic_preview.png',
 64 |             url: 'https://tonicframework.dev'
 65 |           }))}
 66 | 
 67 |           <css-module src="src/styles/index.css">
 68 |           </css-module>
 69 |         </head>
 70 | 
 71 |         <body>
 72 |           <aside>
 73 |             <toc-nav>
 74 |               <a class="logo" href="/">
 75 |                 ${logo()}
 76 |               </a>
 77 | 
 78 |               ${toc}
 79 | 
 80 |             </toc-nav>
 81 |           </aside>
 82 | 
 83 |           <main id="examples">
 84 |             <a class="logo" href="/">
 85 |               ${logo()}
 86 |             </a>
 87 | 
 88 |             ${content}
 89 | 
 90 |           </main>
 91 | 
 92 |           <esbuild-module
 93 |             src="./src/index.js"
 94 |             dest="./build/bundle.js"
 95 |             url="/bundle.js"
 96 |             minify=${true}
 97 |             format="esm"
 98 |             minify-whitespace=${true}
 99 |             keep-names=${true}
100 |             sourcemap="inline">
101 |           </esbuild-module>
102 | 
103 |           <tonic-sprite>
104 |           </tonic-sprite>
105 | 
106 |         </body>
107 |       </html>
108 |     `
109 |   }
110 | }
111 | 
112 | export default ExamplePage
113 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Tonic from 'tonic-ssr'
 2 | import head from './mixins/head.js'
 3 | import logo from './mixins/logo.js'
 4 | 
 5 | class MainPage extends Tonic {
 6 |   async render () {
 7 |     return this.html`
 8 |       <!DOCTYPE html>
 9 | 
10 |       <html>
11 |         <head>
12 |           ${Tonic.unsafeRawString(head({
13 |             title: 'Tonic',
14 |             description: 'A low-profile component framework',
15 |             siteName: 'Tonic Framework',
16 |             image: 'https://tonicframework.dev/images/tonic_preview.png',
17 |             url: 'https://tonicframework.dev'
18 |           }))}
19 | 
20 |           <css-module src="src/styles/index.css">
21 |           </css-module>
22 |         </head>
23 | 
24 |         <body>
25 |           <aside>
26 |             <toc-nav>
27 |               <a class="logo" href="https://github.com/socketsupply/tonic">
28 |                 ${logo()}
29 |               </a>
30 | 
31 |               <a href="#intro">Intro</a>
32 |               <a href="#gettingstarted">Getting Started</a>
33 |               <a href="#props">Properties</a>
34 |               <a href="#state">State</a>
35 |               <a href="#composition">Composition</a>
36 |               <a href="#events">Events</a>
37 |               <a href="#methods">Methods</a>
38 |               <a href="#styles">Styles</a>
39 |               <a href="#ssr">SSR</a>
40 |               <a href="#csp">CSP</a>
41 |               <a href="/examples.html">Examples</a>
42 |             </toc-nav>
43 |           </aside>
44 | 
45 |           <main id="main">
46 |             <markdown-module id="intro" src="src/markdown/guides/intro.md"></markdown-module>
47 |             <markdown-module id="gettingstarted" src="src/markdown/guides/gettingstarted.md"></markdown-module>
48 |             <markdown-module id="props" src="src/markdown/guides/props.md"></markdown-module>
49 |             <markdown-module id="state" src="src/markdown/guides/state.md"></markdown-module>
50 |             <markdown-module id="composition" src="src/markdown/guides/composition.md"></markdown-module>
51 |             <markdown-module id="events" src="src/markdown/guides/events.md"></markdown-module>
52 |             <markdown-module id="methods" src="src/markdown/guides/methods.md"></markdown-module>
53 |             <markdown-module id="styles" src="src/markdown/guides/styles.md"></markdown-module>
54 |             <markdown-module id="ssr" src="src/markdown/guides/ssr.md"></markdown-module>
55 |             <markdown-module id="csp" src="src/markdown/guides/csp.md"></markdown-module>
56 |           </main>
57 | 
58 |           <!--
59 |             Bundles
60 |             -------
61 |             For heavy webapps, use a bundle. For anything
62 |             light weight just use native browser modules.
63 |             -------
64 |           -->
65 | 
66 |           <esbuild-module
67 |             src="./src/index.js"
68 |             dest="./build/bundle.js"
69 |             url="/bundle.js"
70 |             minify=${true}
71 |             minify-whitespace=${true}
72 |             format="esm"
73 |             keep-names=${true}
74 |             sourcemap="inline">
75 |           </esbuild-module>
76 | 
77 |           <!--script type="module" src="/tonic.js">
78 |           </script-x->
79 | 
80 |         </body>
81 |       </html>
82 |     `
83 |   }
84 | }
85 | 
86 | export default MainPage
87 | 


--------------------------------------------------------------------------------
/src/pages/mixins/head.js:
--------------------------------------------------------------------------------
 1 | const metaData = args => {
 2 |   const {
 3 |     title,
 4 |     description,
 5 |     image,
 6 |     url,
 7 |     siteName
 8 |   } = args
 9 | 
10 |   return `
11 |     <title>${title}</title>
12 |     <!--
13 |       <link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32">
14 |       <link rel="icon" type="image/png" href="images/favicon-96x96.png" sizes="96x96">
15 |       <link rel="icon" type="image/png" href="images/favicon-96x96.png" sizes="120x120">
16 |       <link rel="icon" type="image/png" href="images/favicon-96x96.png" sizes="128x128">
17 |       <link rel="apple-touch-icon" type="image/png" href="images/favicon-152x152.png" sizes="152x152">
18 |       <link rel="apple-touch-icon" type="image/png" href="images/favicon-167x167.png" sizes="167x167">
19 |       <link rel="apple-touch-icon" type="image/png" href="images/favicon-180x180.png" sizes="180x180">
20 |     -->
21 | 
22 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
23 |     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no">
24 | 
25 |     <meta name="description" content="${description}">
26 | 
27 |     <meta property="og:type" content="website">
28 |     <meta property="og:url" content="${url}">
29 |     <meta property="og:site_name" content="${siteName}">
30 |     <meta property="og:title" content="${title}">
31 |     <meta property="og:description" content="${description}">
32 |     <meta property="og:image" content="${image}">
33 | 
34 |     <meta name="twitter:card" content="summary_large_image">
35 |     <meta name="twitter:site" content="@tonicframework">
36 |     <meta name="twitter:title" content="${title}">
37 |     <meta name="twitter:image" content="${image}">
38 |     <meta name="twitter:description" content="${description}">
39 |   `
40 | }
41 | 
42 | export default metaData
43 | 


--------------------------------------------------------------------------------
/src/pages/mixins/logo.js:
--------------------------------------------------------------------------------
 1 | import Tonic from 'tonic-ssr'
 2 | 
 3 | export default () => {
 4 |   return Tonic.prototype.html`
 5 |     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 6 |        viewBox="0 0 198.4 119.8" style="enable-background:new 0 0 198.4 119.8;" xml:space="preserve">
 7 |       <style type="text/css">
 8 |         .st0{fill:var(--tonic-primary);}
 9 |       </style>
10 |       <g>
11 |         <path class="st0" d="M91.2,16.5c7.4,1.6,15.9,3.3,23.3,3.3c8.7,0,15.5-3.9,15.5-8.8c0-6.6-10.2-7.1-13.4-7.1
12 |           c-9.4,0-17.5,2.8-26.1,9.2c-5.9-1.4-12.2-3-18.2-4.6C56.9,4.2,40.9,0,28.6,0C14.7,0,0,6.5,0,18.5c0,7.7,8.1,16,21.3,16
13 |           c11.3,0,20.6-3.8,27.6-11.4l0.8-0.8l-2.6-1.9l-0.6,0.7c-6.3,6.8-14.8,10.2-25.2,10.2c-8.7,0-18.1-4.9-18.1-12.8
14 |           c0-7.6,8.7-15.3,25.4-15.3c12,0,28,4.3,43.4,8.4c5.1,1.4,10.3,2.7,15.3,4C69.2,30.6,46,63.1,10.2,117.1l-0.5,0.8l2.6,1.9l0.6-0.9
15 |           C49.8,63.3,73.2,30.4,91.2,16.5z M114.5,16.6c-6.3,0-13.6-1.3-19.8-2.6c7.1-4.8,13.9-6.9,21.9-6.9c2.4,0,10.2,0.3,10.2,3.9
16 |           C126.8,13.7,122.1,16.6,114.5,16.6z"/>
17 |         <path class="st0" d="M163.1,64.5c1.5,0,3-1.6,3-3.2c0-1.5-1.5-3-3-3c-1.6,0-3.2,1.5-3.2,3C160,63,161.5,64.5,163.1,64.5z"/>
18 |         <path class="st0" d="M195.8,92.6l-0.6,0.7c-8.5,9.9-23.5,20.5-32.5,20.5c-1.9,0-5.1-0.8-5.1-5.8c0-4.1,1.6-8.5,4.1-12.5l0.1-0.1
19 |           l0.7-0.8l-0.1-0.1c6.8-10.3,19-18.9,25.1-18.9c1.9,0,1.9,0.6,1.9,0.9c0,4.9-7.3,12.7-15.1,16.1l-0.9,0.4l1.2,3.1l1-0.4
20 |           c8.1-3.7,17-12.4,17-19.1c0-2-1.8-4.1-5.1-4.1c-7.6,0-20.5,9.4-27.7,20.5l-0.4,0.5c-12.7,14.9-22.2,20.2-26.4,20.2
21 |           c-0.5,0-1.4,0-1.4-1.9c0-4.5,5.8-13.8,18.9-29.8l4.3-5.2l-2.6-1.9l-4.1,5.1c-7.3,8.5-10.3,12-11.1,13l-0.3,0.4
22 |           c-14.1,16.5-23.7,20.9-26.8,20.9c-1,0-1.3-0.2-1.3-1.5c0-4,5.5-10.7,10.8-17.2c5.7-7,11.1-13.6,11.1-18.2c0-2.2-1.5-4.5-4.2-4.5
23 |           c-5,0-12.8,6.4-19.6,13c4.3-6.8,4.3-8.7,4.3-9.5c0-2.5-1.4-4-3.6-4c-3.9,0-11.1,8-21.5,20.3l0,0l-0.6,0.7
24 |           c-10,11.7-18.4,15.6-23.6,15.6c9.7-8.9,19.5-23.3,19.5-32.1c0-4.1-2.7-5.6-5.2-5.6c-6.7,0-16.8,8.9-21.6,18.5L53,88.5l-0.7,0.7
25 |           c-6.8,6.8-11.6,15.7-11.6,21.6c0,3.9,2.3,6.5,5.8,6.5c3.1,0,7.1-1.9,11.8-5.6c7.3,2.2,18.5-3.8,28.7-15.6l0,0l0.8-0.9l0.5-0.6l0,0
26 |           l0.2-0.3c7.1-8.3,15.9-18.7,18.7-18.7c0.2,0,0.3,0,0.4,0c0,0.1,0.1,0.3,0.1,0.8c0,3.9-12.8,20.8-19.7,29.8
27 |           c-2.4,3.2-4.5,5.9-5.7,7.6l-0.6,0.8l2.5,1.9l0.6-0.8C102.7,92.4,119.7,76,126.3,76c0.7,0,1,0.1,1,1.3c0,3.5-5.2,9.9-10.2,16
28 |           c-5.8,7-11.7,14.3-11.7,19.4c0,2.3,1.4,4.7,4.5,4.7c4,0,11.5-4.1,20.7-12.9c-1.4,2.9-2.1,5.2-2.1,7.1c0,2.5,1.6,5.1,4.6,5.1
29 |           c4.2,0,12-3.9,22.2-14.2c-0.5,1.9-0.8,3.7-0.8,5.5c0,6.2,4.2,9,8.3,9c9,0,24.7-9.7,35-21.7l0.7-0.8L195.8,92.6z M75.9,74.5
30 |           c1.2,0,2,0.4,2,2.4c0,8.2-10.4,22.9-19.9,31.1c-2.2-1.3-3.3-4.1-3.3-7.9C54.7,88.5,68.9,74.5,75.9,74.5z M51.5,100
31 |           c0,5.6,1.9,8.6,3.8,10.1c-3.5,2.6-6.6,4-8.8,4c-1.3,0-2.6-0.4-2.6-3.3c0-4.6,3.5-11.4,8.8-17.2C51.9,95.8,51.5,98,51.5,100z"/>
32 |       </g>
33 |     </svg>
34 |   `
35 | }
36 | 


--------------------------------------------------------------------------------
/src/styles/examples.css:
--------------------------------------------------------------------------------
  1 | .example {
  2 |   position: relative;
  3 |   width: 100%;
  4 |   padding-right: 25%;
  5 |   min-height: 82px;
  6 |   max-height: 512px;
  7 |   display: grid;
  8 |   gap: 10px;
  9 | }
 10 | 
 11 | .example tonic-form {
 12 |   align-items: flex-end;
 13 | }
 14 | 
 15 | .example tonic-button {
 16 |   margin: 20px 20px 0px 0;
 17 | }
 18 | 
 19 | .example.full-width {
 20 |   padding-right: 0;
 21 | }
 22 | 
 23 | .example .header {
 24 |   font: 13px/16px var(--tonic-subheader);
 25 |   font-weight: 400;
 26 |   text-transform: uppercase;
 27 |   letter-spacing: 1px;
 28 |   padding: 12px 10px 10px 10px;
 29 |   background-color: var(--tonic-background);
 30 |   border-bottom: 1px solid var(--tonic-border);
 31 | }
 32 | 
 33 | .example .content {
 34 |   max-width: 450px;
 35 |   padding: 15px;
 36 | }
 37 | 
 38 | .example.buttons {
 39 |   grid-template-columns: 1fr 1fr;
 40 | }
 41 | 
 42 | tonic-button.danger {
 43 |   --tonic-button-text: rgba(255, 255, 255, 1);
 44 |   --tonic-button-background: rgba(240, 100, 83, 1);
 45 |   --tonic-button-background-hover: rgba(255, 80, 55, 1);
 46 |   --tonic-button-background-focus: rgba(220, 80, 60, 1);
 47 | }
 48 | 
 49 | tonic-button.outline {
 50 |   --tonic-button-text: var(--tonic-primary);
 51 |   --tonic-button-background: transparent;
 52 |   --tonic-button-background-hover: var(--tonic-primary);
 53 |   --tonic-button-background-focus: transparent;
 54 | 
 55 | tonic-button.outline button {
 56 |   border-color: var(--tonic-primary);
 57 |   border-width: 1px !important;
 58 | 
 59 | tonic-button.outline button:focus {
 60 |   border-width: 2px !important;
 61 | }
 62 | 
 63 | tonic-button.outline button:focus:hover {
 64 |   --tonic-button-text: rgba(255, 255, 255, 1);
 65 | }
 66 | 
 67 | @media (max-width: 850px) {
 68 |   div.example {
 69 |     padding-right: 0;
 70 |   }
 71 |   div.example ~ table {
 72 |     display: table;
 73 |   }
 74 | }
 75 | 
 76 | table {
 77 |   width: 100%;
 78 |   text-align: left;
 79 |   border: 1px solid blue;
 80 |   margin-bottom: 15px;
 81 |   border-collapse: collapse;
 82 |   border: 1px solid var(--tonic-border);
 83 | }
 84 | 
 85 | @media (max-width: 850px) {
 86 |   main#examples table,
 87 |   main#examples h2,
 88 |   main#examples h3,
 89 |   main#examples h4,
 90 |   main#examples pre {
 91 |     display: none;
 92 |     width: 200px;
 93 |     max-width: 100%;
 94 |     overflow: auto;
 95 |   }
 96 | }
 97 | 
 98 | th {
 99 |   font: 13px/16px var(--tonic-subheader);
100 |   font-weight: 400;
101 |   text-transform: uppercase;
102 |   letter-spacing: 1px;
103 |   padding: 12px 10px;
104 |   background-color: var(--tonic-background);
105 |   border-bottom: 1px solid var(--tonic-border);
106 |   border-right: 1px solid var(--tonic-border);
107 | }
108 | 
109 | td {
110 |   line-height: 22px;
111 |   padding: 15px;
112 |   border-bottom: 1px solid var(--tonic-border);
113 | }
114 | 
115 | td:not(:first-of-type) {
116 |   border-left: 1px solid var(--tonic-border);
117 | }
118 | 
119 | tr:last-of-type td {
120 |   border-bottom: 0;
121 | }
122 | 
123 | td:last-of-type {
124 |   border-right: 0;
125 | }
126 | 
127 | /* Component Styles */
128 | 
129 | tonic-accordion {
130 |   width: 100%;
131 |   margin-bottom: 20px;
132 | }
133 | 
134 | tonic-accordion .tonic--accordion-panel {
135 |   line-height: 1.4em;
136 | }
137 | 
138 | tonic-badge {
139 |   display: inline-block;
140 | }
141 | 
142 | tonic-button#tonic-button-example-4 {
143 |   width: 30px;
144 |   height: 30px;
145 | }
146 | 
147 | .tonic--dialog,
148 | .tonic--dialog--overlay {
149 |   position: fixed !important;
150 | }
151 | 
152 | show-random {
153 |   display: grid;
154 |   grid-template-rows: 44px 1fr 80px;
155 |   grid-template-columns: 1fr;
156 | }
157 | 
158 | show-random header {
159 |   line-height: 44px;
160 |   text-align: center;
161 |   color: var(--tonic-medium);
162 |   display: block;
163 | }
164 | 
165 | show-random main {
166 |   padding: 30px;
167 |   position: relative;
168 |   text-align: center;
169 | }
170 | 
171 | show-random footer {
172 |   text-align: center;
173 |   background-color: var(--tonic-window);
174 |   padding: 16px;
175 |   text-align: center;
176 |   width: 100%;
177 |   display: block;
178 | }
179 | 
180 | #tonic-input-state {
181 |   display: inline-block;
182 |   padding-top: 15px;
183 | }
184 | 
185 | tonic-form {
186 |   display: grid;
187 |   grid-template-columns: 1fr 1fr;
188 |   gap: 20px;
189 | }
190 | 
191 | tonic-loader {
192 |   border: 1px solid var(--tonic-info);
193 |   width: 75%;
194 |   position: relative;
195 | }
196 | 
197 | .loader-content {
198 |   position: relative;
199 |   height: 100px;
200 |   width: 100px;
201 | }
202 | 
203 | read-wikipedia h3 {
204 |   margin: 0;
205 | }
206 | 
207 | read-wikipedia header {
208 |   padding: 20px;
209 |   position: absolute;
210 |   top: 0;
211 |   left: 0;
212 |   right: 0;
213 |   height: 90px;
214 | }
215 | 
216 | read-wikipedia main {
217 |   padding: 40px 20px;
218 |   position: absolute;
219 |   text-align: left;
220 |   top: 90px;
221 |   left: 0;
222 |   right: 0;
223 |   bottom: 70px;
224 |   overflow: scroll;
225 | }
226 | 
227 | read-wikipedia footer {
228 |   position: absolute;
229 |   left: 0;
230 |   right: 0;
231 |   bottom: 0;
232 |   height: 70px;
233 |   padding: 10px;
234 |   text-align: center;
235 |   border-top: 1px solid var(--tonic-border);
236 | }
237 | 
238 | tonic-router {
239 |   margin-top: 20px;
240 |   padding-top: 20px;
241 | }
242 | 
243 | tonic-router.tonic--show {
244 |   display: block;
245 |   margin: 20px 0 6px;
246 |   padding-top: 20px;
247 |   border-top: 1px solid var(--tonic-border);
248 | }
249 | 
250 | #tonic-router-select {
251 |   display: inline-block;
252 | }
253 | 
254 | tonic-tabs a.tonic--tab {
255 |   border-bottom: 1px solid transparent;
256 |   margin: 0;
257 |   margin-right: 10px;
258 |   display: inline-block;
259 | }
260 | 
261 | tonic-tabs a.tonic--tab:focus {
262 |   border-bottom: 1px solid var(--tonic-accent);
263 | }
264 | 
265 | tonic-tabs a.tonic--tab[aria-selected="true"] {
266 |   border-bottom: 1px solid var(--tonic-accent);
267 | }
268 | 
269 | tonic-tab-panel {
270 |   flex-basis: 100%;
271 |   padding: 15px 0;
272 | }
273 | 
274 | #tonic-tooltip-example {
275 |   width: fit-content;
276 | }
277 | 
278 | tonic-tooltip .tonic--tooltip {
279 |   padding: 40px 10px;
280 | }
281 | 
282 | body main div.example .content.windowed-example {
283 |   max-width: initial;
284 |   padding: 0;
285 |   position: relative;
286 |   height: 330px;
287 | }
288 | 
289 | example-windowed {
290 |   height: 300px;
291 | }
292 | 
293 | example-windowed .th {
294 |   background: var(--tonic-border);
295 | }
296 | 
297 | example-windowed .th,
298 | example-windowed .tr {
299 |   height: 30px;
300 |   display: flex;
301 |   overflow: hidden;
302 |   border-bottom: 1px solid var(--tonic-border);
303 | }
304 | 
305 | example-windowed .tr:hover {
306 |   background: var(--tonic-accent);
307 |   color: #fff;
308 |   cursor: default;
309 | }
310 | 
311 | example-windowed .td {
312 |   white-space: nowrap;
313 |   display: inline-block;
314 |   text-overflow: ellipsis;
315 |   overflow: hidden;
316 |   width: 100px;
317 |   font-family: var(--tonic-monospace);
318 |   font-size: 14px;
319 |   height: 30px;
320 |   line-height: 30px;
321 |   flex-basis: 33.3%;
322 |   padding: 0 4px;
323 | }
324 | 
325 | #click-to-load {
326 |   position: absolute;
327 |   display: flex;
328 |   left: 0;
329 |   right: 0;
330 |   background: var(--tonic-window);
331 |   z-index: 1;
332 |   top: 0;
333 |   bottom: 0;
334 |   cursor: pointer;
335 |   opacity: 1;
336 |   transition: all 1.5s;
337 | }
338 | 
339 | #click-to-load span {
340 |   margin: auto;
341 | }
342 | 
343 | #click-to-load.hidden {
344 |   opacity: 0;
345 |   z-index: -1;
346 | }
347 | 


--------------------------------------------------------------------------------
/src/styles/highlight.js.css:
--------------------------------------------------------------------------------
 1 | .hljs {
 2 |   display: block;
 3 |   overflow-x: auto;
 4 |   padding: 0.5em;
 5 |   background: #f0f0f0;
 6 | }
 7 | .hljs,
 8 | .hljs-subst {
 9 |   color: var(--tonic-medium);
10 | }
11 | .hljs-comment {
12 |   color: #aaa;
13 | }
14 | .hljs-keyword,
15 | .hljs-attribute,
16 | .hljs-selector-tag,
17 | .hljs-meta-keyword,
18 | .hljs-doctag,
19 | .hljs-name {
20 |   font-weight: bold;
21 | }
22 | .hljs-type,
23 | .hljs-string,
24 | .hljs-number,
25 | .hljs-selector-id,
26 | .hljs-selector-class,
27 | .hljs-quote,
28 | .hljs-template-tag,
29 | .hljs-deletion {
30 |   color: #38b9ff;
31 | }
32 | .hljs-title,
33 | .hljs-section {
34 |   color: #38b9ff;
35 |   font-weight: bold;
36 | }
37 | .hljs-regexp,
38 | .hljs-symbol,
39 | .hljs-variable,
40 | .hljs-template-variable,
41 | .hljs-link,
42 | .hljs-selector-attr,
43 | .hljs-selector-pseudo {
44 |   color: #38b9ff;
45 | }
46 | .hljs-literal {
47 |   color: #38b9ff;
48 | }
49 | .hljs-built_in,
50 | .hljs-bullet,
51 | .hljs-code,
52 | .hljs-addition {
53 |   color: #38b9ff;
54 | }
55 | .hljs-meta {
56 |   color: #1f7199;
57 | }
58 | .hljs-meta-string {
59 |   color: #bc6060;
60 | }
61 | .hljs-emphasis {
62 |   font-style: italic;
63 | }
64 | .hljs-strong {
65 |   font-weight: bold;
66 | }
67 | 


--------------------------------------------------------------------------------
/src/styles/index.css:
--------------------------------------------------------------------------------
  1 | @import path("./theme.css");
  2 | @import path("./highlight.js.css");
  3 | @import path("./examples.css");
  4 | 
  5 | * {
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | ::-moz-placeholder {
 10 |   color: var(--tonic-medium);
 11 | }
 12 | 
 13 | :-ms-input-placeholder {
 14 |   color: var(--tonic-medium);
 15 | }
 16 | 
 17 | ::placeholder {
 18 |   color: var(--tonic-medium);
 19 | }
 20 | 
 21 | ::-webkit-scrollbar-corner,
 22 | ::-webkit-scrollbar {
 23 |   background: transparent;
 24 | }
 25 | 
 26 | ::-webkit-scrollbar {
 27 |   width: 10px;
 28 |   height: 10px;
 29 | }
 30 | 
 31 | ::-webkit-scrollbar-thumb {
 32 |   background: var(--tonic-border);
 33 | }
 34 | 
 35 | html {
 36 |   scroll-behavior: smooth !important;
 37 | }
 38 | 
 39 | body {
 40 |   margin: 0;
 41 |   padding: 0;
 42 |   font-family: var(--tonic-body);
 43 |   display: grid;
 44 |   grid-template-columns: 25% 75%;
 45 |   line-height: 18px;
 46 |   font-size: 1em;
 47 |   background: var(--tonic-window);
 48 |   color: var(--tonic-primary);
 49 | }
 50 | 
 51 | h1, h2, h3 {
 52 |   font-family: var(--tonic-header);
 53 |   margin-top: 100px;
 54 |   line-height: 40px;
 55 | }
 56 | 
 57 | h1 {
 58 |   font-size: 32px;
 59 | }
 60 | 
 61 | h2 {
 62 |   margin-top: 40px;
 63 |   line-height: 32px;
 64 | }
 65 | 
 66 | h3 {
 67 |   margin-top: 40px;
 68 |   font-size: 22px;
 69 | }
 70 | 
 71 | hr {
 72 |   height: 2px;
 73 |   margin: 20px 0px;
 74 |   background-color: transparent;
 75 |   border: 0;
 76 | }
 77 | 
 78 | blockquote {
 79 |   border-left: 2px solid;
 80 |   padding-left: 10px;
 81 |   margin-left: 10px;
 82 |   color: var(--tonic-info);
 83 | }
 84 | 
 85 | code, pre {
 86 |   font-family: var(--tonic-monospace);
 87 |   background-color: var(--tonic-background);
 88 |   font-size: 14px;
 89 |   border: 1px solid var(--tonic-border);
 90 | }
 91 | 
 92 | pre code {
 93 |   border: none;
 94 | }
 95 | 
 96 | code {
 97 |   padding: 2px;
 98 | }
 99 | 
100 | pre {
101 |   padding: 14px;
102 |   overflow: auto;
103 | }
104 | 
105 | aside {
106 |   padding: 50px 5% 0 5%;
107 |   grid-area: 1 / 1;
108 | }
109 | 
110 | table {
111 |   display: block;
112 |   overflow: auto;
113 |   max-width: 100%;
114 |   border-collapse: collapse;
115 |   border: 1px solid var(--tonic-border);
116 | }
117 | 
118 | p {
119 |   line-height: 26px;
120 | }
121 | 
122 | a, a:visted, a:active {
123 |   text-decoration: none;
124 | }
125 | 
126 | a {
127 |   color: var(--tonic-accent);
128 |   text-decoration: none;
129 |   padding-bottom: 1px;
130 |   border-bottom: 1px solid transparent;
131 | }
132 | 
133 | a:not(.logo):hover {
134 |   padding-bottom: 1px;
135 |   border-bottom: 1px solid;
136 | }
137 | 
138 | #dark {
139 |   position: absolute;
140 |   margin-top: -6px;
141 | }
142 | 
143 | @media (max-width: 768px) {
144 |   #dark {
145 |     display: none;
146 |   }
147 | }
148 | 
149 | div.title {
150 |   margin-bottom: 30px;
151 | }
152 | 
153 | div.title h1 {
154 |   margin-top: 30%;
155 |   font-size: 60px;
156 |   line-height: 60px;
157 | }
158 | 
159 | aside {
160 |   background-color: var(--tonic-background);
161 |   border-right: 1px solid var(--tonic-border);
162 |   font-size: 14px;
163 |   text-transform: capitalize;
164 | }
165 | 
166 | @media (max-width: 768px) {
167 |   aside {
168 |     display: none;
169 |   }
170 | }
171 | 
172 | toc-nav {
173 |   display: grid;
174 |   letter-spacing: 1.1;
175 | }
176 | 
177 | toc-nav a {
178 |   display: inline-block;
179 |   margin: 10px 25%;
180 | }
181 | 
182 | a {
183 |   color: var(--tonic-dark);
184 |   width: fit-content;
185 | }
186 | 
187 | aside .logo {
188 |   display: block;
189 |   width: 50%;
190 |   margin: auto;
191 | }
192 | 
193 | aside .logo:hover {
194 |   border-color: transparent;
195 | }
196 | 
197 | aside svg {
198 |   width: 100%;
199 |   margin: 30px 0;
200 | }
201 | 
202 | main#main,
203 | main#examples {
204 |   grid-area: 1 / 2;
205 |   padding: 50px 15% 0 15%;
206 |   padding-bottom: 100px;
207 | }
208 | 
209 | main .logo {
210 |   display: none;
211 | }
212 | 
213 | main .logo svg {
214 |   width: 50%;
215 |   color: black;
216 |   margin-top: 50px;
217 | }
218 | 
219 | @media (max-width: 768px) {
220 |   main .logo {
221 |     display: block;
222 |   }
223 | }
224 | 
225 | .checklists {
226 |   display: grid;
227 |   grid-template-columns: 1fr 1fr;
228 |   gap: 20px;
229 |   margin-top: 30px;
230 |   margin-bottom: 30%;
231 | }
232 | 
233 | .checklists a {
234 |   border-bottom: 1px dotted;
235 | }
236 | 
237 | .checklists h1,
238 | .checklists h2 {
239 |   margin-top: 32;
240 | }
241 | 
242 | .checklists ul {
243 |   list-style: none;
244 | }
245 | 
246 | .checklists ul.checklist {
247 |   font: 16px var(--tonic-body);
248 |   padding: 0;
249 |   flex-basis: 50%;
250 | }
251 | 
252 | .checklists ul.checklist li {
253 |   line-height: 28px;
254 | }
255 | 
256 | .checklists ul.checklist li a:not(.logo) {
257 |   margin: 0;
258 | }
259 | 
260 | .checklists ul.checklist li:before {
261 |   content: '';
262 |   width: 9px;
263 |   height: 4px;
264 |   display: inline-block;
265 |   vertical-align: super;
266 |   margin-right: 9px;
267 |   border-bottom: 2px solid var(--tonic-primary);
268 |   border-left: 2px solid var(--tonic-primary);
269 |   transform: rotate(-45deg);
270 |   position: relative;
271 |   top: 2px;
272 | }
273 | 
274 | @media (max-width: 768px) {
275 |   body {
276 |     display: block;
277 |   }
278 | 
279 |   div.title h1 {
280 |     font-size: 48px;
281 |     line-height: 48px;
282 |   }
283 | 
284 |   .checklists main {
285 |     padding: 50px 10%;
286 |   }
287 | 
288 |   .checklists {
289 |     grid-template-columns: 1fr;
290 |   }
291 | 
292 |   main#examples,
293 |   main#main {
294 |     padding: 50px 10% 0 10%;
295 |   }
296 | }
297 | 


--------------------------------------------------------------------------------
/src/styles/theme.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: 'Body';
 3 |   src: url('fonts/Inter-Light.woff2');
 4 | }
 5 | 
 6 | @font-face {
 7 |   font-family: 'Header';
 8 |   src: url('fonts/Inter-Black.woff2');
 9 | }
10 | 
11 | @font-face {
12 |   font-family: 'FiraMono-Regular';
13 |   src: url('fonts/FiraMono-Regular.woff2');
14 | }
15 | 
16 | body {
17 |   --tonic-body: 'Body', sans-serif;
18 |   --tonic-header: 'Header', sans-serif;
19 |   --tonic-subheader: 'Header', sans-serif;
20 |   --tonic-monospace: 'FiraMono-Regular', monospace;
21 | }
22 | 
23 | body, *[theme="light"] {
24 |   --tonic-background: rgba(244, 247, 249, 1);
25 |   --tonic-window: rgba(255, 255, 255, 1);
26 |   --tonic-accent: rgba(56, 185, 255, 1);
27 |   --tonic-primary: rgba(54, 57, 61, 1);
28 |   --tonic-secondary: rgba(232, 232, 228, 1);
29 |   --tonic-light: rgba(153, 157, 160, 1);
30 |   --tonic-medium: rgba(153, 157, 160, 1);
31 |   --tonic-dark: rgba(90, 101, 113, 1);
32 |   --tonic-shadow: rgba(150, 150, 150, 0.25);
33 |   --tonic-disabled: rgba(152, 161, 175, 1);
34 |   --tonic-button-text: rgba(54, 57, 61, 1);
35 |   --tonic-button-shadow: rgba(0, 0, 0, 33%);
36 |   --tonic-button-background: rgba(245, 245, 245, 1);
37 |   --tonic-button-background-hover: rgba(230, 230, 230, 1);
38 |   --tonic-button-background-focus: rgba(237, 237, 237, 1);
39 |   --tonic-input-text: rgba(54, 57, 61, 1);
40 |   --tonic-input-text-hover: rgba(228, 228, 228, 1);
41 |   --tonic-input-border: rgba(201, 201, 201, 1);
42 |   --tonic-input-border-hover: rgba(54, 57, 61, 1);
43 |   --tonic-input-background-focus: rgba(238, 238, 238, 1);
44 |   --tonic-border: rgba(231, 237, 241, 1);
45 |   --tonic-error: rgba(240, 102, 83, 1);
46 |   --tonic-notification: rgba(240, 102, 83, 1);
47 |   --tonic-danger: rgba(240, 102, 83, 1);
48 |   --tonic-success: rgba(133, 178, 116, 1);
49 |   --tonic-warning: rgba(249, 169, 103, 1);
50 |   --tonic-info: rgba(153, 157, 160, 1);
51 |   --tonic-overlay: rgba(255, 255, 255, 0.4);
52 | }
53 | 
54 | *[theme="dark"] {
55 |   --tonic-background: rgba(40, 40, 40, 1);
56 |   --tonic-window: rgba(49, 49, 49, 1);
57 |   --tonic-accent: rgba(56, 185, 255, 1);
58 |   --tonic-primary: rgba(255, 255, 255, 1);
59 |   --tonic-secondary: rgba(195, 195, 195, 1);
60 |   --tonic-medium: rgba(153, 157, 160, 1);
61 |   --tonic-disabled: rgba(170, 170, 170, 1);
62 |   --tonic-dark: rgba(128, 129, 134, 1);
63 |   --tonic-shadow: rgba(0, 0, 0, 0.3);
64 |   --tonic-button-text: rgba(255, 255, 255, 1);
65 |   --tonic-button-shadow: rgba(0, 0, 0, 1);
66 |   --tonic-button-background: rgba(74, 74, 74, 1);
67 |   --tonic-button-background-hover: rgba(94, 94, 94, 1);
68 |   --tonic-button-background-focus: rgba(84, 84, 84, 1);
69 |   --tonic-input-text: rgba(255, 255, 255, 1);
70 |   --tonic-input-text-hover: rgba(255, 255, 255, 1);
71 |   --tonic-input-background-focus: rgba(30, 30, 30, 1);
72 |   --tonic-input-border: rgba(80, 80, 80, 1);
73 |   --tonic-input-border-hover: rgba(105, 105, 105, 1);
74 |   --tonic-border: rgba(70, 72, 76, 1);
75 |   --tonic-error: rgba(240, 102, 83, 1);
76 |   --tonic-notification: rgba(240, 102, 83, 1);
77 |   --tonic-caution: rgba(240, 102, 83, 1);
78 |   --tonic-success: rgba(133, 178, 116, 1);
79 |   --tonic-warn: rgba(249, 169, 103, 1);
80 |   --tonic-overlay: rgba(0, 0, 0, 0.4);
81 | }
82 | 


--------------------------------------------------------------------------------
/website.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "localhost": {
  3 |     "provider": "aws",
  4 |     "spa": "",
  5 |     "lastDeployed": null,
  6 |     "properties": {
  7 |       "relativeFolder": {
  8 |         "value": [
  9 |           ".."
 10 |         ]
 11 |       },
 12 |       "cache": {
 13 |         "value": 7800
 14 |       },
 15 |       "gzip": {
 16 |         "value": true
 17 |       },
 18 |       "customLocalServer": {
 19 |         "enabled": true,
 20 |         "value": "node ./bin/loader.js"
 21 |       },
 22 |       "apiRoute": {
 23 |         "value": ""
 24 |       },
 25 |       "apiRouteDestination": {
 26 |         "value": null
 27 |       },
 28 |       "predeploy": {
 29 |         "directory": [
 30 |           "..",
 31 |           "build"
 32 |         ],
 33 |         "command": ""
 34 |       },
 35 |       "bucketName": {
 36 |         "value": ""
 37 |       },
 38 |       "bucketRegion": {
 39 |         "value": ""
 40 |       },
 41 |       "domain": {
 42 |         "value": ""
 43 |       }
 44 |     }
 45 |   },
 46 |   "137418857087": {
 47 |     "provider": "aws",
 48 |     "spa": "",
 49 |     "lastDeployed": null,
 50 |     "properties": {
 51 |       "relativeFolder": {
 52 |         "value": [
 53 |           ".."
 54 |         ],
 55 |         "deployed": false
 56 |       },
 57 |       "cache": {
 58 |         "value": 7800,
 59 |         "deployed": false
 60 |       },
 61 |       "gzip": {
 62 |         "value": true,
 63 |         "deployed": false
 64 |       },
 65 |       "customLocalServer": {
 66 |         "enabled": false,
 67 |         "value": "",
 68 |         "deployed": false
 69 |       },
 70 |       "apiRoute": {
 71 |         "value": "",
 72 |         "deployed": false
 73 |       },
 74 |       "apiRouteDestination": {
 75 |         "value": null,
 76 |         "deployed": false
 77 |       },
 78 |       "predeploy": {
 79 |         "value": "",
 80 |         "deployed": false
 81 |       },
 82 |       "bucketName": {
 83 |         "value": "",
 84 |         "deployed": false
 85 |       },
 86 |       "bucketRegion": {
 87 |         "value": "",
 88 |         "deployed": false
 89 |       },
 90 |       "domain": {
 91 |         "value": "",
 92 |         "deployed": false
 93 |       }
 94 |     },
 95 |     "created": false
 96 |   },
 97 |   "572141287366": {
 98 |     "provider": "aws",
 99 |     "spa": "",
100 |     "lastDeployed": null,
101 |     "properties": {
102 |       "relativeFolder": {
103 |         "value": [
104 |           ".."
105 |         ],
106 |         "deployed": false
107 |       },
108 |       "cache": {
109 |         "value": 7800,
110 |         "deployed": false
111 |       },
112 |       "gzip": {
113 |         "value": true,
114 |         "deployed": false
115 |       },
116 |       "customLocalServer": {
117 |         "enabled": false,
118 |         "value": "",
119 |         "deployed": false
120 |       },
121 |       "apiRoute": {
122 |         "value": "",
123 |         "deployed": false
124 |       },
125 |       "apiRouteDestination": {
126 |         "value": null,
127 |         "deployed": false
128 |       },
129 |       "predeploy": {
130 |         "value": "",
131 |         "deployed": false
132 |       },
133 |       "bucketName": {
134 |         "value": "",
135 |         "deployed": false
136 |       },
137 |       "bucketRegion": {
138 |         "value": "",
139 |         "deployed": false
140 |       },
141 |       "domain": {
142 |         "value": "",
143 |         "deployed": false
144 |       }
145 |     },
146 |     "created": false
147 |   },
148 |   "633075417262": {
149 |     "provider": "aws",
150 |     "spa": "",
151 |     "lastDeployed": "2023-01-23T12:56:38.770Z",
152 |     "properties": {
153 |       "relativeFolder": {
154 |         "value": [
155 |           ".."
156 |         ]
157 |       },
158 |       "cache": {
159 |         "value": 7800
160 |       },
161 |       "gzip": {
162 |         "value": true
163 |       },
164 |       "customLocalServer": {
165 |         "enabled": false,
166 |         "value": "",
167 |         "deployed": false
168 |       },
169 |       "apiRoute": {
170 |         "value": "",
171 |         "deployed": false
172 |       },
173 |       "apiRouteDestination": {
174 |         "value": null,
175 |         "deployed": false
176 |       },
177 |       "predeploy": {
178 |         "command": "npm run build",
179 |         "directory": [
180 |           "..",
181 |           "build"
182 |         ],
183 |         "deployed": false
184 |       },
185 |       "bucketName": {
186 |         "value": "static.635e4eafbd5bf8.tonic-docs"
187 |       },
188 |       "bucketRegion": {
189 |         "value": "us-east-1"
190 |       },
191 |       "domain": {
192 |         "value": "tonicframework.dev",
193 |         "hostedZoneId": "/hostedzone/Z102472634HUYI6EEHDUA"
194 |       }
195 |     },
196 |     "createResponse": {
197 |       "created": true,
198 |       "bucketRegion": "us-east-1",
199 |       "ctime": 1646340713417,
200 |       "cloudfrontId": "E3T2L7U5MO2H60"
201 |     },
202 |     "cloudfrontId": "E3T2L7U5MO2H60",
203 |     "cloudfrontDomain": "d3o710p4woajfw.cloudfront.net"
204 |   },
205 |   "104940042594": {
206 |     "provider": "aws",
207 |     "spa": "",
208 |     "lastDeployed": null,
209 |     "properties": {
210 |       "relativeFolder": {
211 |         "value": [
212 |           ".."
213 |         ],
214 |         "deployed": false
215 |       },
216 |       "cache": {
217 |         "value": 7800,
218 |         "deployed": false
219 |       },
220 |       "gzip": {
221 |         "value": true,
222 |         "deployed": false
223 |       },
224 |       "customLocalServer": {
225 |         "enabled": false,
226 |         "value": "",
227 |         "deployed": false
228 |       },
229 |       "apiRoute": {
230 |         "value": "",
231 |         "deployed": false
232 |       },
233 |       "apiRouteDestination": {
234 |         "value": null,
235 |         "deployed": false
236 |       },
237 |       "predeploy": {
238 |         "directory": "",
239 |         "command": "",
240 |         "deployed": false
241 |       },
242 |       "bucketName": {
243 |         "value": "",
244 |         "deployed": false
245 |       },
246 |       "bucketRegion": {
247 |         "value": "",
248 |         "deployed": false
249 |       },
250 |       "domain": {
251 |         "value": "",
252 |         "deployed": false
253 |       }
254 |     },
255 |     "created": false
256 |   },
257 |   "768180738139": {
258 |     "provider": "aws",
259 |     "spa": "",
260 |     "lastDeployed": "2022-03-04T18:17:25.310Z",
261 |     "properties": {
262 |       "relativeFolder": {
263 |         "value": [
264 |           ".."
265 |         ]
266 |       },
267 |       "cache": {
268 |         "value": 7800
269 |       },
270 |       "gzip": {
271 |         "value": true
272 |       },
273 |       "customLocalServer": {
274 |         "enabled": false,
275 |         "value": "",
276 |         "deployed": false
277 |       },
278 |       "apiRoute": {
279 |         "value": "",
280 |         "deployed": false
281 |       },
282 |       "apiRouteDestination": {
283 |         "value": null,
284 |         "deployed": false
285 |       },
286 |       "predeploy": {
287 |         "command": "npm run build",
288 |         "directory": [
289 |           "..",
290 |           "build"
291 |         ],
292 |         "deployed": false
293 |       },
294 |       "bucketName": {
295 |         "value": "static.da6f009d06dc2.tonic-docs"
296 |       },
297 |       "bucketRegion": {
298 |         "value": "us-east-1"
299 |       },
300 |       "domain": {
301 |         "value": "",
302 |         "deployed": false
303 |       }
304 |     },
305 |     "createResponse": {
306 |       "created": true,
307 |       "bucketRegion": "us-east-1",
308 |       "ctime": 1646417792736,
309 |       "cloudfrontId": "EPV6TQL159GW6",
310 |       "cloudfrontDomain": "d28pq0m9139e1q.cloudfront.net"
311 |     },
312 |     "cloudfrontId": "EPV6TQL159GW6",
313 |     "cloudfrontDomain": "d28pq0m9139e1q.cloudfront.net"
314 |   },
315 |   "305103105464": {
316 |     "provider": "aws",
317 |     "spa": "",
318 |     "lastDeployed": null,
319 |     "properties": {
320 |       "relativeFolder": {
321 |         "value": [
322 |           ".."
323 |         ]
324 |       },
325 |       "cache": {
326 |         "value": 7800
327 |       },
328 |       "gzip": {
329 |         "value": true
330 |       },
331 |       "customLocalServer": {
332 |         "enabled": true,
333 |         "value": "node ./bin/loader.js"
334 |       },
335 |       "apiRoute": {
336 |         "value": ""
337 |       },
338 |       "apiRouteDestination": {
339 |         "value": null
340 |       },
341 |       "predeploy": {
342 |         "directory": [
343 |           "..",
344 |           "build"
345 |         ],
346 |         "command": ""
347 |       },
348 |       "bucketName": {
349 |         "value": ""
350 |       },
351 |       "bucketRegion": {
352 |         "value": ""
353 |       },
354 |       "domain": {
355 |         "value": ""
356 |       }
357 |     },
358 |     "created": false
359 |   }
360 | }
361 | 


--------------------------------------------------------------------------------