@e280/shiny 0.1.0-14 → 0.1.0-16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (277) hide show
  1. package/README.md +34 -80
  2. package/package.json +18 -25
  3. package/s/{components → _archive/components}/drawer/component.ts +2 -2
  4. package/s/{components → _archive/components}/drawer/showcase.ts +13 -0
  5. package/s/_archive/demo/utils/lipsum.ts +19 -0
  6. package/s/{demo → _archive/demo}/views/exhibit/style.css.ts +3 -0
  7. package/s/_archive/demo/views/showcase/style.css.ts +53 -0
  8. package/s/_archive/demo/views/showcase/view.ts +54 -0
  9. package/s/_archive/index.html.ts +34 -0
  10. package/s/_archive/index.ts +19 -0
  11. package/s/_archive/utils/states.ts +15 -0
  12. package/s/demo/main.bundle.ts +16 -0
  13. package/s/demo/main.css +71 -0
  14. package/s/demo/parts/exhibit.ts +15 -0
  15. package/s/demo/utils/lipsum.ts +1 -1
  16. package/s/demo/views/codebox/style.css.ts +43 -0
  17. package/s/demo/views/codebox/use-prism-styles.ts +13 -0
  18. package/s/demo/views/codebox/view.ts +39 -0
  19. package/s/demo/views/showcase/style.css.ts +42 -11
  20. package/s/demo/views/showcase/view.ts +41 -45
  21. package/s/demo/views/stylebox/view.ts +21 -0
  22. package/s/index.html.ts +42 -29
  23. package/s/index.ts +1 -17
  24. package/s/test.ts +5 -0
  25. package/s/theme/parts/core.ts +34 -0
  26. package/s/theme/parts/reset.ts +20 -0
  27. package/s/theme/parts/vars.ts +41 -0
  28. package/s/theme/theme-string.ts +15 -0
  29. package/s/theme/theme.css.ts +7 -0
  30. package/s/views/button/showcase.ts +43 -0
  31. package/s/views/button/style.css.ts +110 -0
  32. package/s/views/button/view.ts +30 -0
  33. package/s/views/copy/parts/copy-status.ts +3 -0
  34. package/s/views/copy/parts/determine-base-status.ts +7 -0
  35. package/s/views/copy/parts/use-copier.ts +20 -0
  36. package/s/views/copy/showcase.ts +54 -0
  37. package/s/views/copy/style.css.ts +46 -0
  38. package/s/views/copy/view.ts +58 -0
  39. package/s/views/drawer/control.ts +31 -0
  40. package/s/views/drawer/showcase.ts +83 -0
  41. package/s/views/drawer/style.css.ts +128 -0
  42. package/s/views/drawer/view.ts +76 -0
  43. package/s/views/tabs/control.ts +31 -0
  44. package/s/views/tabs/showcase.ts +89 -0
  45. package/s/views/tabs/style.css.ts +46 -0
  46. package/s/views/tabs/view.ts +66 -0
  47. package/x/demo/main.bundle.js +13 -0
  48. package/x/demo/main.bundle.js.map +1 -0
  49. package/x/demo/main.bundle.min.js +794 -0
  50. package/x/demo/main.bundle.min.js.map +7 -0
  51. package/x/demo/main.css +71 -0
  52. package/x/demo/parts/exhibit.d.ts +11 -0
  53. package/x/demo/parts/exhibit.js +2 -0
  54. package/x/demo/parts/exhibit.js.map +1 -0
  55. package/x/demo/utils/lipsum.d.ts +1 -1
  56. package/x/demo/utils/lipsum.js +1 -1
  57. package/x/demo/utils/lipsum.js.map +1 -1
  58. package/x/demo/views/codebox/style.css.js +42 -0
  59. package/x/demo/views/codebox/style.css.js.map +1 -0
  60. package/x/demo/views/codebox/use-prism-styles.d.ts +1 -0
  61. package/x/demo/views/codebox/use-prism-styles.js +12 -0
  62. package/x/demo/views/codebox/use-prism-styles.js.map +1 -0
  63. package/x/demo/views/codebox/view.d.ts +2 -0
  64. package/x/demo/views/codebox/view.js +29 -0
  65. package/x/demo/views/codebox/view.js.map +1 -0
  66. package/x/demo/views/showcase/style.css.js +42 -11
  67. package/x/demo/views/showcase/style.css.js.map +1 -1
  68. package/x/demo/views/showcase/view.d.ts +2 -7
  69. package/x/demo/views/showcase/view.js +39 -35
  70. package/x/demo/views/showcase/view.js.map +1 -1
  71. package/x/demo/views/stylebox/view.d.ts +3 -0
  72. package/x/demo/views/stylebox/view.js +13 -0
  73. package/x/demo/views/stylebox/view.js.map +1 -0
  74. package/x/index.d.ts +1 -11
  75. package/x/index.html +212 -62
  76. package/x/index.html.js +40 -26
  77. package/x/index.html.js.map +1 -1
  78. package/x/index.js +1 -11
  79. package/x/index.js.map +1 -1
  80. package/x/test.js +3 -0
  81. package/x/test.js.map +1 -0
  82. package/x/theme/parts/core.d.ts +1 -0
  83. package/x/theme/parts/core.js +33 -0
  84. package/x/theme/parts/core.js.map +1 -0
  85. package/x/theme/parts/reset.d.ts +1 -0
  86. package/x/theme/parts/reset.js +19 -0
  87. package/x/theme/parts/reset.js.map +1 -0
  88. package/x/theme/parts/vars.d.ts +1 -0
  89. package/x/theme/parts/vars.js +34 -0
  90. package/x/theme/parts/vars.js.map +1 -0
  91. package/x/theme/theme-string.d.ts +1 -0
  92. package/x/theme/theme-string.js +14 -0
  93. package/x/theme/theme-string.js.map +1 -0
  94. package/x/theme/theme.css.d.ts +1 -0
  95. package/x/theme/theme.css.js +4 -0
  96. package/x/theme/theme.css.js.map +1 -0
  97. package/x/views/button/showcase.d.ts +1 -0
  98. package/x/views/button/showcase.js +41 -0
  99. package/x/views/button/showcase.js.map +1 -0
  100. package/x/views/button/style.css.js +109 -0
  101. package/x/views/button/style.css.js.map +1 -0
  102. package/x/views/button/view.d.ts +4 -0
  103. package/x/views/button/view.js +22 -0
  104. package/x/views/button/view.js.map +1 -0
  105. package/x/views/copy/parts/copy-status.d.ts +1 -0
  106. package/x/views/copy/parts/copy-status.js +2 -0
  107. package/x/views/copy/parts/copy-status.js.map +1 -0
  108. package/x/views/copy/parts/determine-base-status.d.ts +1 -0
  109. package/x/views/copy/parts/determine-base-status.js +6 -0
  110. package/x/views/copy/parts/determine-base-status.js.map +1 -0
  111. package/x/views/copy/parts/use-copier.d.ts +6 -0
  112. package/x/views/copy/parts/use-copier.js +13 -0
  113. package/x/views/copy/parts/use-copier.js.map +1 -0
  114. package/x/views/copy/showcase.d.ts +1 -0
  115. package/x/views/copy/showcase.js +51 -0
  116. package/x/views/copy/showcase.js.map +1 -0
  117. package/x/views/copy/style.css.js.map +1 -0
  118. package/x/views/copy/view.d.ts +4 -0
  119. package/x/views/copy/view.js +47 -0
  120. package/x/views/copy/view.js.map +1 -0
  121. package/x/{components → views}/drawer/control.d.ts +1 -1
  122. package/x/views/drawer/control.js.map +1 -0
  123. package/x/views/drawer/showcase.d.ts +1 -0
  124. package/x/views/drawer/showcase.js +75 -0
  125. package/x/views/drawer/showcase.js.map +1 -0
  126. package/x/{components → views}/drawer/style.css.js +1 -0
  127. package/x/views/drawer/style.css.js.map +1 -0
  128. package/x/views/drawer/view.d.ts +6 -0
  129. package/x/views/drawer/view.js +60 -0
  130. package/x/views/drawer/view.js.map +1 -0
  131. package/x/{components → views}/tabs/control.d.ts +2 -2
  132. package/x/{components → views}/tabs/control.js +3 -3
  133. package/x/views/tabs/control.js.map +1 -0
  134. package/x/views/tabs/showcase.d.ts +1 -0
  135. package/x/views/tabs/showcase.js +86 -0
  136. package/x/views/tabs/showcase.js.map +1 -0
  137. package/x/{components → views}/tabs/style.css.js +5 -5
  138. package/x/views/tabs/style.css.js.map +1 -0
  139. package/x/views/tabs/view.d.ts +5 -0
  140. package/x/views/tabs/view.js +52 -0
  141. package/x/views/tabs/view.js.map +1 -0
  142. package/x/components/button/component.d.ts +0 -6
  143. package/x/components/button/component.js +0 -25
  144. package/x/components/button/component.js.map +0 -1
  145. package/x/components/button/showcase.d.ts +0 -1
  146. package/x/components/button/showcase.js +0 -116
  147. package/x/components/button/showcase.js.map +0 -1
  148. package/x/components/button/style.css.js +0 -62
  149. package/x/components/button/style.css.js.map +0 -1
  150. package/x/components/copy/component.d.ts +0 -376
  151. package/x/components/copy/component.js +0 -63
  152. package/x/components/copy/component.js.map +0 -1
  153. package/x/components/copy/showcase.d.ts +0 -1
  154. package/x/components/copy/showcase.js +0 -48
  155. package/x/components/copy/showcase.js.map +0 -1
  156. package/x/components/copy/style.css.js.map +0 -1
  157. package/x/components/drawer/component.d.ts +0 -387
  158. package/x/components/drawer/component.js +0 -73
  159. package/x/components/drawer/component.js.map +0 -1
  160. package/x/components/drawer/control.js.map +0 -1
  161. package/x/components/drawer/showcase.d.ts +0 -1
  162. package/x/components/drawer/showcase.js +0 -92
  163. package/x/components/drawer/showcase.js.map +0 -1
  164. package/x/components/drawer/style.css.js.map +0 -1
  165. package/x/components/example/component.d.ts +0 -371
  166. package/x/components/example/component.js +0 -22
  167. package/x/components/example/component.js.map +0 -1
  168. package/x/components/example/showcase.d.ts +0 -1
  169. package/x/components/example/showcase.js +0 -30
  170. package/x/components/example/showcase.js.map +0 -1
  171. package/x/components/example/style.css.js +0 -10
  172. package/x/components/example/style.css.js.map +0 -1
  173. package/x/components/foundation.css.d.ts +0 -1
  174. package/x/components/foundation.css.js +0 -14
  175. package/x/components/foundation.css.js.map +0 -1
  176. package/x/components/framework.d.ts +0 -8
  177. package/x/components/framework.js +0 -5
  178. package/x/components/framework.js.map +0 -1
  179. package/x/components/raw-components.d.ts +0 -12
  180. package/x/components/raw-components.js +0 -13
  181. package/x/components/raw-components.js.map +0 -1
  182. package/x/components/tabs/component.d.ts +0 -374
  183. package/x/components/tabs/component.js +0 -60
  184. package/x/components/tabs/component.js.map +0 -1
  185. package/x/components/tabs/control.js.map +0 -1
  186. package/x/components/tabs/showcase.d.ts +0 -1
  187. package/x/components/tabs/showcase.js +0 -167
  188. package/x/components/tabs/showcase.js.map +0 -1
  189. package/x/components/tabs/style.css.js.map +0 -1
  190. package/x/demo/demo.bundle.js +0 -42
  191. package/x/demo/demo.bundle.js.map +0 -1
  192. package/x/demo/demo.bundle.min.js +0 -877
  193. package/x/demo/demo.bundle.min.js.map +0 -7
  194. package/x/demo/lipsum.d.ts +0 -2
  195. package/x/demo/lipsum.js +0 -4
  196. package/x/demo/lipsum.js.map +0 -1
  197. package/x/demo/views/exhibit/style.css.d.ts +0 -2
  198. package/x/demo/views/exhibit/style.css.js +0 -81
  199. package/x/demo/views/exhibit/style.css.js.map +0 -1
  200. package/x/demo/views/exhibit/view.d.ts +0 -29
  201. package/x/demo/views/exhibit/view.js +0 -40
  202. package/x/demo/views/exhibit/view.js.map +0 -1
  203. package/x/demo/viewsets.d.ts +0 -17
  204. package/x/demo/viewsets.js +0 -9
  205. package/x/demo/viewsets.js.map +0 -1
  206. package/x/install/aura.bundle.js +0 -5
  207. package/x/install/aura.bundle.js.map +0 -1
  208. package/x/install/aura.bundle.min.js +0 -471
  209. package/x/install/aura.bundle.min.js.map +0 -7
  210. package/x/install/plain.bundle.d.ts +0 -1
  211. package/x/install/plain.bundle.js +0 -5
  212. package/x/install/plain.bundle.js.map +0 -1
  213. package/x/install/plain.bundle.min.js +0 -398
  214. package/x/install/plain.bundle.min.js.map +0 -7
  215. package/x/shiny.d.ts +0 -47
  216. package/x/shiny.js +0 -8
  217. package/x/shiny.js.map +0 -1
  218. package/x/tests.test.d.ts +0 -1
  219. package/x/tests.test.js +0 -3
  220. package/x/tests.test.js.map +0 -1
  221. package/x/themes/aura.css.d.ts +0 -1
  222. package/x/themes/aura.css.js +0 -85
  223. package/x/themes/aura.css.js.map +0 -1
  224. package/x/themes/index.barrel.d.ts +0 -2
  225. package/x/themes/index.barrel.js +0 -3
  226. package/x/themes/index.barrel.js.map +0 -1
  227. package/x/themes/index.d.ts +0 -2
  228. package/x/themes/index.js +0 -2
  229. package/x/themes/index.js.map +0 -1
  230. package/x/themes/infra/css-vars.d.ts +0 -15
  231. package/x/themes/infra/css-vars.js +0 -22
  232. package/x/themes/infra/css-vars.js.map +0 -1
  233. package/x/themes/plain.css.d.ts +0 -1
  234. package/x/themes/plain.css.js +0 -10
  235. package/x/themes/plain.css.js.map +0 -1
  236. /package/s/{components → _archive/components}/button/component.ts +0 -0
  237. /package/s/{components → _archive/components}/button/showcase.ts +0 -0
  238. /package/s/{components → _archive/components}/button/style.css.ts +0 -0
  239. /package/s/{components → _archive/components}/copy/component.ts +0 -0
  240. /package/s/{components → _archive/components}/copy/showcase.ts +0 -0
  241. /package/s/{components → _archive/components}/copy/style.css.ts +0 -0
  242. /package/s/{components → _archive/components}/drawer/control.ts +0 -0
  243. /package/s/{components → _archive/components}/drawer/style.css.ts +0 -0
  244. /package/s/{components → _archive/components}/example/component.ts +0 -0
  245. /package/s/{components → _archive/components}/example/showcase.ts +0 -0
  246. /package/s/{components → _archive/components}/example/style.css.ts +0 -0
  247. /package/s/{components → _archive/components}/foundation.css.ts +0 -0
  248. /package/s/{components → _archive/components}/framework.ts +0 -0
  249. /package/s/{components → _archive/components}/raw-components.ts +0 -0
  250. /package/s/{components → _archive/components}/tabs/component.ts +0 -0
  251. /package/s/{components → _archive/components}/tabs/control.ts +0 -0
  252. /package/s/{components → _archive/components}/tabs/showcase.ts +0 -0
  253. /package/s/{components → _archive/components}/tabs/style.css.ts +0 -0
  254. /package/s/{demo → _archive/demo}/demo.bundle.ts +0 -0
  255. /package/s/{demo → _archive/demo}/demo.css +0 -0
  256. /package/s/{demo → _archive/demo}/lipsum.ts +0 -0
  257. /package/s/{demo → _archive/demo}/views/exhibit/view.ts +0 -0
  258. /package/s/{demo → _archive/demo}/viewsets.ts +0 -0
  259. /package/s/{install → _archive/install}/aura.bundle.ts +0 -0
  260. /package/s/{install → _archive/install}/plain.bundle.ts +0 -0
  261. /package/s/{shiny.ts → _archive/shiny.ts} +0 -0
  262. /package/s/{tests.test.ts → _archive/tests.test.ts} +0 -0
  263. /package/s/{themes → _archive/themes}/aura.css.ts +0 -0
  264. /package/s/{themes → _archive/themes}/index.barrel.ts +0 -0
  265. /package/s/{themes → _archive/themes}/index.ts +0 -0
  266. /package/s/{themes → _archive/themes}/infra/css-vars.ts +0 -0
  267. /package/s/{themes → _archive/themes}/plain.css.ts +0 -0
  268. /package/x/{demo → _archive/demo}/demo.css +0 -0
  269. /package/x/demo/{demo.bundle.d.ts → main.bundle.d.ts} +0 -0
  270. /package/x/{components/button → demo/views/codebox}/style.css.d.ts +0 -0
  271. /package/x/{install/aura.bundle.d.ts → test.d.ts} +0 -0
  272. /package/x/{components/copy → views/button}/style.css.d.ts +0 -0
  273. /package/x/{components/drawer → views/copy}/style.css.d.ts +0 -0
  274. /package/x/{components → views}/copy/style.css.js +0 -0
  275. /package/x/{components → views}/drawer/control.js +0 -0
  276. /package/x/{components/example → views/drawer}/style.css.d.ts +0 -0
  277. /package/x/{components → views}/tabs/style.css.d.ts +0 -0
package/x/index.html CHANGED
@@ -1,43 +1,65 @@
1
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8"/>
5
- <meta name="viewport" content="width=device-width,initial-scale=1"/>
6
- <meta name="darkreader-lock"/>
7
- <title>shiny</title>
8
- <style>
9
- @layer vars, core, page;
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8"/>
5
+ <meta name="viewport" content="width=device-width,initial-scale=1"/>
6
+ <meta name="darkreader-lock"/>
7
+ <style>@layer base{html{background:#000;color:#aaa;}}</style>
8
+
9
+ <title>shiny</title>
10
+ <link rel="icon" href="/assets/favicon.png"/>
11
+ <script type="module" src="demo/main.bundle.min.js?v=e92e9bd79ded"></script>
12
+
13
+ <style>
14
+
15
+ @layer vars, reset, core, underlay, view, overlay;
10
16
 
11
17
  @layer vars {
12
- :root {
13
- --bg: #333;
14
- --color: #fff;
15
- --prime: #d068ff;
16
- --code: #3f1;
17
- --link: cyan;
18
18
 
19
- --selection: white;
20
- --selection-bg: #f70;
19
+ :is(:root, :host) {
20
+ --bg: var(--shiny-bg, #111);
21
+ --alpha: var(--shiny-alpha, #def);
22
+ --rounded: var(--shiny-rounded, 0.5em);
23
+ --padding: var(--shiny-padding, 0.5em);
24
+ --prime: var(--shiny-prime, #d068ff);
25
+ --code: var(--shiny-code, #3f1);
26
+ --link: var(--shiny-link, cyan);
27
+ --selection: var(--shiny-selection, white);
28
+ --selection-bg: var(--shiny-selection-bg, #f70);
29
+ --lame: var(--shiny-lame, #8888);
30
+ --angry: var(--shiny-angry, #f50);
31
+ --zesty: var(--shiny-zesty, #cf0);
32
+ --happy: var(--shiny-happy, #0fa);
33
+ --calm: var(--shiny-calm, #0af);
34
+ --sad: var(--shiny-sad, #74f);
35
+ --quirky: var(--shiny-quirky, #f49);
36
+ --inactive-opacity: var(--shiny-inactive-opacity, 0.5);
37
+ --anim-duration: var(--shiny-anim-duration, 300ms);
21
38
  }
39
+
22
40
  }
41
+ @layer reset {
23
42
 
24
- @layer core {
25
43
  * {
26
- margin: 0;
27
- padding: 0;
28
- box-sizing: border-box;
44
+ margin: 0;
45
+ padding: 0;
46
+ box-sizing: border-box;
29
47
 
30
- scrollbar-width: thin;
31
- scrollbar-color: #444 transparent;
48
+ scrollbar-width: thin;
49
+ scrollbar-color: #888 transparent;
32
50
  }
33
51
 
34
- :not(:defined) {
35
- display: none;
52
+ ::-webkit-scrollbar { width: 8px; }
53
+ ::-webkit-scrollbar-track { background: transparent; }
54
+ ::-webkit-scrollbar-thumb { background: #888; border-radius: 1em; }
55
+ ::-webkit-scrollbar-thumb:hover { background: #999; }
56
+
36
57
  }
58
+ @layer core {
37
59
 
38
60
  ::selection {
39
- color: var(--selection);
40
- background-color: var(--selection-bg);
61
+ color: var(--selection);
62
+ background-color: var(--selection-bg);
41
63
  }
42
64
 
43
65
  ::-webkit-scrollbar { width: 8px; }
@@ -46,25 +68,28 @@
46
68
  ::-webkit-scrollbar-thumb:hover { background: #666; }
47
69
 
48
70
  a {
49
- color: var(--link);
50
- text-decoration: none;
71
+ color: var(--link);
72
+ text-decoration: none;
51
73
 
52
- &:visited {
53
- color: color-mix(in srgb, purple, var(--link) 70%);
54
- }
74
+ &amp;:visited {
75
+ color: color-mix(in srgb, purple, var(--link) 70%);
76
+ }
55
77
 
56
- &:hover {
57
- color: color-mix(in srgb, white, var(--link) 90%);
58
- text-decoration: underline;
59
- }
78
+ &amp;:hover {
79
+ color: color-mix(in srgb, white, var(--link) 90%);
80
+ text-decoration: underline;
81
+ }
60
82
 
61
- &:active {
62
- color: color-mix(in srgb, white, var(--link) 50%);
63
- }
83
+ &amp;:active {
84
+ color: color-mix(in srgb, white, var(--link) 50%);
85
+ }
64
86
  }
87
+
65
88
  }
66
89
 
67
- @layer page {
90
+ </style>
91
+ <style>
92
+ @layer view {
68
93
  :root {
69
94
  height: 100%;
70
95
  font-size: 16px;
@@ -73,7 +98,7 @@ a {
73
98
  color-scheme: dark;
74
99
  scrollbar-gutter: stable;
75
100
 
76
- color: var(--color);
101
+ color: var(--alpha);
77
102
  background: var(--bg);
78
103
 
79
104
  --tint: #070429aa;
@@ -124,37 +149,162 @@ body > section {
124
149
  flex-direction: column;
125
150
  align-items: center;
126
151
  justify-content: center;
127
- margin-bottom: 1em;
152
+ margin-bottom: calc(var(--padding) * 2);
153
+ }
154
+
155
+ .gallery {
156
+ display: flex;
157
+ flex-direction: column;
158
+ gap: calc(var(--padding) * 2);
128
159
  }
129
160
  }
130
161
 
131
162
  </style>
132
- <script type=module src="demo/demo.bundle.min.js?v=e8f4caacb692"></script>
133
- <link rel="icon" href="assets/favicon.png?v=0414eeb5fcc2"/>
163
+ <style data-prism>/**
164
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
165
+ * Based on https://github.com/chriskempson/tomorrow-theme
166
+ * @author Rose Pritchard
167
+ */
168
+
169
+ code[class*="language-"],
170
+ pre[class*="language-"] {
171
+ color: #ccc;
172
+ background: none;
173
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
174
+ font-size: 1em;
175
+ text-align: left;
176
+ white-space: pre;
177
+ word-spacing: normal;
178
+ word-break: normal;
179
+ word-wrap: normal;
180
+ line-height: 1.5;
181
+
182
+ -moz-tab-size: 4;
183
+ -o-tab-size: 4;
184
+ tab-size: 4;
185
+
186
+ -webkit-hyphens: none;
187
+ -moz-hyphens: none;
188
+ -ms-hyphens: none;
189
+ hyphens: none;
190
+
191
+ }
192
+
193
+ /* Code blocks */
194
+ pre[class*="language-"] {
195
+ padding: 1em;
196
+ margin: .5em 0;
197
+ overflow: auto;
198
+ }
199
+
200
+ :not(pre) > code[class*="language-"],
201
+ pre[class*="language-"] {
202
+ background: #2d2d2d;
203
+ }
204
+
205
+ /* Inline code */
206
+ :not(pre) > code[class*="language-"] {
207
+ padding: .1em;
208
+ border-radius: .3em;
209
+ white-space: normal;
210
+ }
211
+
212
+ .token.comment,
213
+ .token.block-comment,
214
+ .token.prolog,
215
+ .token.doctype,
216
+ .token.cdata {
217
+ color: #999;
218
+ }
219
+
220
+ .token.punctuation {
221
+ color: #ccc;
222
+ }
134
223
 
135
- <meta name="theme-color" content="#d068ff">
136
- <meta property="og:type" content="website">
137
- <meta property="og:site_name" content="@e280/shiny">
138
- <meta property="og:title" content="✨shiny✨">
139
- <meta property="og:description" content="web ui components">
140
- <meta property="og:image" content="https://shiny.e280.org/assets/favicon.png">
224
+ .token.tag,
225
+ .token.attr-name,
226
+ .token.namespace,
227
+ .token.deleted {
228
+ color: #e2777a;
229
+ }
230
+
231
+ .token.function-name {
232
+ color: #6196cc;
233
+ }
234
+
235
+ .token.boolean,
236
+ .token.number,
237
+ .token.function {
238
+ color: #f08d49;
239
+ }
240
+
241
+ .token.property,
242
+ .token.class-name,
243
+ .token.constant,
244
+ .token.symbol {
245
+ color: #f8c555;
246
+ }
141
247
 
248
+ .token.selector,
249
+ .token.important,
250
+ .token.atrule,
251
+ .token.keyword,
252
+ .token.builtin {
253
+ color: #cc99cd;
254
+ }
255
+
256
+ .token.string,
257
+ .token.char,
258
+ .token.attr-value,
259
+ .token.regex,
260
+ .token.variable {
261
+ color: #7ec699;
262
+ }
263
+
264
+ .token.operator,
265
+ .token.entity,
266
+ .token.url {
267
+ color: #67cdcc;
268
+ }
269
+
270
+ .token.important,
271
+ .token.bold {
272
+ font-weight: bold;
273
+ }
274
+ .token.italic {
275
+ font-style: italic;
276
+ }
277
+
278
+ .token.entity {
279
+ cursor: help;
280
+ }
281
+
282
+ .token.inserted {
283
+ color: green;
284
+ }
285
+ </style>
142
286
 
143
287
 
144
- </head>
145
- <body>
288
+ <meta name="theme-color" content="#d068ff">
289
+ <meta property="og:type" content="website">
290
+ <meta property="og:site_name" content="@e280/shiny">
291
+ <meta property="og:title" content="✨shiny✨">
292
+ <meta property="og:description" content="web ui library">
293
+ <meta property="og:image" content="https://shiny.e280.org/assets/favicon.png">
146
294
 
147
- <h1>
148
- <strong>✨shiny✨</strong>
149
- <small>v0.1.0-14</small>
150
- </h1>
151
295
 
152
- <section>
153
- <p>web ui components</p>
154
- <p><a href="https://github.com/e280/shiny#readme">readme for installation</a></p>
155
- </section>
296
+ </head>
297
+ <body>
298
+ <h1>
299
+ <strong>✨shiny✨</strong>
300
+ <small>v0.1.0-16</small>
301
+ </h1>
156
302
 
157
- <shiny-demo></shiny-demo>
303
+ <section>
304
+ <p>e280's web ui library</p>
305
+ <p><a href="https://github.com/e280/shiny#readme">readme for installation</a></p>
306
+ </section>
158
307
 
159
- </body>
160
- </html>
308
+ <div class="gallery"></div>
309
+ </body>
310
+ </html>
package/x/index.html.js CHANGED
@@ -1,30 +1,44 @@
1
- import { ssg, html } from "@e280/scute";
1
+ import { template, html, socialCard } from "@e280/scute";
2
+ import { themeString } from "./theme/theme-string.js";
2
3
  const favicon = "/assets/favicon.png";
3
- export default ssg.page(import.meta.url, async (orb) => ({
4
- title: "shiny",
5
- js: "demo/demo.bundle.min.js",
6
- css: "demo/demo.css",
7
- favicon,
8
- dark: true,
9
- socialCard: {
10
- themeColor: "#d068ff",
11
- siteName: "@e280/shiny",
12
- title: "✨shiny✨",
13
- description: "web ui components",
14
- image: "https://shiny.e280.org" + favicon,
15
- },
16
- body: html `
17
- <h1>
18
- <strong>✨shiny✨</strong>
19
- <small>v${orb.packageVersion()}</small>
20
- </h1>
4
+ export default template(import.meta.url, async (orb) => html `
5
+ <!doctype html>
6
+ <html>
7
+ <head>
8
+ <meta charset="utf-8"/>
9
+ <meta name="viewport" content="width=device-width,initial-scale=1"/>
10
+ <meta name="darkreader-lock"/>
11
+ <style>@layer base{html{background:#000;color:#aaa;}}</style>
21
12
 
22
- <section>
23
- <p>web ui components</p>
24
- <p><a href="https://github.com/e280/shiny#readme">readme for installation</a></p>
25
- </section>
13
+ <title>shiny</title>
14
+ <link rel="icon" href="${favicon}"/>
15
+ <script type="module" src="${orb.hashurl("demo/main.bundle.min.js")}"></script>
26
16
 
27
- <shiny-demo></shiny-demo>
28
- `,
29
- }));
17
+ <style>${themeString}</style>
18
+ <style>${orb.inject("demo/main.css")}</style>
19
+ <style data-prism>${orb.inject("$/node_modules/prismjs/themes/prism-tomorrow.css")}</style>
20
+
21
+ ${socialCard({
22
+ themeColor: "#d068ff",
23
+ siteName: "@e280/shiny",
24
+ title: "✨shiny✨",
25
+ description: "web ui library",
26
+ image: "https://shiny.e280.org" + favicon,
27
+ })}
28
+ </head>
29
+ <body>
30
+ <h1>
31
+ <strong>✨shiny✨</strong>
32
+ <small>v${orb.packageVersion()}</small>
33
+ </h1>
34
+
35
+ <section>
36
+ <p>e280's web ui library</p>
37
+ <p><a href="https://github.com/e280/shiny#readme">readme for installation</a></p>
38
+ </section>
39
+
40
+ <div class="gallery"></div>
41
+ </body>
42
+ </html>
43
+ `);
30
44
  //# sourceMappingURL=index.html.js.map
package/x/index.html.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAErC,eAAe,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC;IACtD,KAAK,EAAE,OAAO;IACd,EAAE,EAAE,yBAAyB;IAC7B,GAAG,EAAE,eAAe;IACpB,OAAO;IACP,IAAI,EAAE,IAAI;IACV,UAAU,EAAE;QACX,UAAU,EAAE,SAAS;QACrB,QAAQ,EAAE,aAAa;QACvB,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,mBAAmB;QAChC,KAAK,EAAE,wBAAwB,GAAG,OAAO;KACzC;IAED,IAAI,EAAE,IAAI,CAAA;;;aAGE,GAAG,CAAC,cAAc,EAAE;;;;;;;;;EAS/B;CACD,CAAC,CAAC,CAAA"}
1
+ {"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAC,MAAM,aAAa,CAAA;AACtD,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAA;AAEnD,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAErC,eAAe,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;4BAU9B,OAAO;gCACH,GAAG,CAAC,OAAO,CAAC,yBAAyB,CAAC;;YAE1D,WAAW;YACX,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC;uBAChB,GAAG,CAAC,MAAM,CAAC,kDAAkD,CAAC;;KAEhF,UAAU,CAAC;IACZ,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,gBAAgB;IAC7B,KAAK,EAAE,wBAAwB,GAAG,OAAO;CACzC,CAAC;;;;;cAKS,GAAG,CAAC,cAAc,EAAE;;;;;;;;;;;CAWjC,CAAC,CAAA"}
package/x/index.js CHANGED
@@ -1,12 +1,2 @@
1
- export * from "./themes/index.js";
2
- export * from "./components/copy/component.js";
3
- export * from "./components/drawer/component.js";
4
- export * from "./components/drawer/control.js";
5
- export * from "./components/example/component.js";
6
- export * from "./components/tabs/component.js";
7
- export * from "./components/tabs/control.js";
8
- export * from "./components/foundation.css.js";
9
- export * from "./components/framework.js";
10
- export * from "./components/raw-components.js";
11
- export * from "./shiny.js";
1
+ export * from "./views/copy/view.js";
12
2
  //# sourceMappingURL=index.js.map
package/x/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,mBAAmB,CAAA;AAEjC,cAAc,gCAAgC,CAAA;AAE9C,cAAc,kCAAkC,CAAA;AAChD,cAAc,gCAAgC,CAAA;AAE9C,cAAc,mCAAmC,CAAA;AAEjD,cAAc,gCAAgC,CAAA;AAC9C,cAAc,8BAA8B,CAAA;AAE5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAE9C,cAAc,YAAY,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA"}
package/x/test.js ADDED
@@ -0,0 +1,3 @@
1
+ import { run } from "@e280/science";
2
+ await run({});
3
+ //# sourceMappingURL=test.js.map
package/x/test.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"test.js","sourceRoot":"","sources":["../s/test.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,eAAe,CAAA;AAEjC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAA"}
package/x/theme/parts/core.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const coreString: string;
package/x/theme/parts/core.js ADDED
@@ -0,0 +1,33 @@
1
+ import { templateString as css } from "@e280/stz";
2
+ export const coreString = css `@layer core {
3
+
4
+ ::selection {
5
+ color: var(--selection);
6
+ background-color: var(--selection-bg);
7
+ }
8
+
9
+ ::-webkit-scrollbar { width: 8px; }
10
+ ::-webkit-scrollbar-track { background: transparent; }
11
+ ::-webkit-scrollbar-thumb { background: #444; border-radius: 1em; }
12
+ ::-webkit-scrollbar-thumb:hover { background: #666; }
13
+
14
+ a {
15
+ color: var(--link);
16
+ text-decoration: none;
17
+
18
+ &:visited {
19
+ color: color-mix(in srgb, purple, var(--link) 70%);
20
+ }
21
+
22
+ &:hover {
23
+ color: color-mix(in srgb, white, var(--link) 90%);
24
+ text-decoration: underline;
25
+ }
26
+
27
+ &:active {
28
+ color: color-mix(in srgb, white, var(--link) 50%);
29
+ }
30
+ }
31
+
32
+ }`;
33
+ //# sourceMappingURL=core.js.map
package/x/theme/parts/core.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"core.js","sourceRoot":"","sources":["../../../s/theme/parts/core.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA;AAC/C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8B3B,CAAA"}
package/x/theme/parts/reset.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const resetString: string;
package/x/theme/parts/reset.js ADDED
@@ -0,0 +1,19 @@
1
+ import { templateString as css } from "@e280/stz";
2
+ export const resetString = css `@layer reset {
3
+
4
+ * {
5
+ margin: 0;
6
+ padding: 0;
7
+ box-sizing: border-box;
8
+
9
+ scrollbar-width: thin;
10
+ scrollbar-color: #888 transparent;
11
+ }
12
+
13
+ ::-webkit-scrollbar { width: 8px; }
14
+ ::-webkit-scrollbar-track { background: transparent; }
15
+ ::-webkit-scrollbar-thumb { background: #888; border-radius: 1em; }
16
+ ::-webkit-scrollbar-thumb:hover { background: #999; }
17
+
18
+ }`;
19
+ //# sourceMappingURL=reset.js.map
package/x/theme/parts/reset.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"reset.js","sourceRoot":"","sources":["../../../s/theme/parts/reset.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA;AAC/C,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;EAgB5B,CAAA"}
package/x/theme/parts/vars.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const varsString: string;
package/x/theme/parts/vars.js ADDED
@@ -0,0 +1,34 @@
1
+ import { templateString as css } from "@e280/stz";
2
+ export const varsString = css `@layer vars {
3
+
4
+ :is(:root, :host) {
5
+ ${renderVars({
6
+ "bg": "#111",
7
+ "alpha": "#def",
8
+ "rounded": "0.5em",
9
+ "padding": "0.5em",
10
+ "prime": "#d068ff",
11
+ "code": "#3f1",
12
+ "link": "cyan",
13
+ "selection": "white",
14
+ "selection-bg": "#f70",
15
+ "lame": "#8888",
16
+ "angry": "#f50",
17
+ "zesty": "#cf0",
18
+ "happy": "#0fa",
19
+ "calm": "#0af",
20
+ "sad": "#74f",
21
+ "quirky": "#f49",
22
+ "inactive-opacity": "0.5",
23
+ "anim-duration": "300ms",
24
+ })}
25
+ }
26
+
27
+ }`;
28
+ function renderVar([name, value]) {
29
+ return `--${name}: var(--shiny-${name}, ${value});`;
30
+ }
31
+ function renderVars(varsObject) {
32
+ return Object.entries(varsObject).map(renderVar).join("\n");
33
+ }
34
+ //# sourceMappingURL=vars.js.map
package/x/theme/parts/vars.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"vars.js","sourceRoot":"","sources":["../../../s/theme/parts/vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA;AAC/C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;GAG1B,UAAU,CAAC;IACZ,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,MAAM;IAEf,SAAS,EAAE,OAAO;IAClB,SAAS,EAAE,OAAO;IAElB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,MAAM;IACd,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,OAAO;IACpB,cAAc,EAAE,MAAM;IAEtB,MAAM,EAAE,OAAO;IACf,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;IAEhB,kBAAkB,EAAE,KAAK;IACzB,eAAe,EAAE,OAAO;CACxB,CAAC;;;EAGD,CAAA;AAEF,SAAS,SAAS,CAAC,CAAC,IAAI,EAAE,KAAK,CAAmB;IACjD,OAAO,KAAK,IAAI,iBAAiB,IAAI,KAAK,KAAK,IAAI,CAAA;AACpD,CAAC;AAED,SAAS,UAAU,CAAC,UAAkC;IACrD,OAAO,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAC5D,CAAC"}
package/x/theme/theme-string.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const themeString: string;
package/x/theme/theme-string.js ADDED
@@ -0,0 +1,14 @@
1
+ import { templateString as css } from "@e280/stz";
2
+ import { coreString } from "./parts/core.js";
3
+ import { varsString } from "./parts/vars.js";
4
+ import { resetString } from "./parts/reset.js";
5
+ export const themeString = css `
6
+
7
+ @layer vars, reset, core, underlay, view, overlay;
8
+
9
+ ${varsString}
10
+ ${resetString}
11
+ ${coreString}
12
+
13
+ `;
14
+ //# sourceMappingURL=theme-string.js.map
package/x/theme/theme-string.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-string.js","sourceRoot":"","sources":["../../s/theme/theme-string.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,IAAI,GAAG,EAAC,MAAM,WAAW,CAAA;AAC/C,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAC,UAAU,EAAC,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAA;AAC5C,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;EAI5B,UAAU;EACV,WAAW;EACX,UAAU;;CAEX,CAAA"}
package/x/theme/theme.css.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const themeCss: CSSStyleSheet;
package/x/theme/theme.css.js ADDED
@@ -0,0 +1,4 @@
1
+ import { themeString } from "./theme-string.js";
2
+ export const themeCss = new CSSStyleSheet();
3
+ themeCss.replaceSync(themeString);
4
+ //# sourceMappingURL=theme.css.js.map
package/x/theme/theme.css.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme.css.js","sourceRoot":"","sources":["../../s/theme/theme.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAA;AAE7C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,aAAa,EAAE,CAAA;AAE3C,QAAQ,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA"}
package/x/views/button/showcase.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const buttonShowcase: () => import("@e280/sly").Content;
package/x/views/button/showcase.js ADDED
@@ -0,0 +1,41 @@
1
+ import { css } from "lit";
2
+ import { ShinyButton } from "./view.js";
3
+ import { exhibit } from "../../demo/parts/exhibit.js";
4
+ import { Showcase } from "../../demo/views/showcase/view.js";
5
+ export const buttonShowcase = () => Showcase("ShinyButton", [
6
+ exhibit({
7
+ name: "catalog",
8
+ explain: "click-to-copy button.",
9
+ render: () => [
10
+ ShinyButton("e280"),
11
+ ShinyButton("e280", { vibe: "happy" }),
12
+ ShinyButton("e280", { vibe: "sad" }),
13
+ ShinyButton("e280", { vibe: "angry" }),
14
+ ShinyButton("e280", { vibe: "zesty" }),
15
+ ShinyButton("e280", { vibe: "quirky" }),
16
+ ShinyButton("e280", { vibe: "lame" }),
17
+ ],
18
+ styleboxCss: css `
19
+ :host {
20
+ font-size: 1.5em;
21
+ display: flex;
22
+ justify-content: center;
23
+ flex-wrap: wrap;
24
+ gap: calc(var(--padding) / 2);
25
+ }
26
+ `,
27
+ js: `
28
+ [
29
+ ShinyButton("e280"),
30
+ ShinyButton("e280", {vibe: "happy"}),
31
+ ShinyButton("e280", {vibe: "sad"}),
32
+ ShinyButton("e280", {vibe: "angry"}),
33
+ ShinyButton("e280", {vibe: "zesty"}),
34
+ ShinyButton("e280", {vibe: "quirky"}),
35
+ ShinyButton("e280", {vibe: "lame"}),
36
+ ]
37
+ `,
38
+ css: undefined,
39
+ }),
40
+ ]);
41
+ //# sourceMappingURL=showcase.js.map
package/x/views/button/showcase.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"showcase.js","sourceRoot":"","sources":["../../../s/views/button/showcase.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AACrC,OAAO,EAAC,OAAO,EAAC,MAAM,6BAA6B,CAAA;AACnD,OAAO,EAAC,QAAQ,EAAC,MAAM,mCAAmC,CAAA;AAE1D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,EAAE;IAC3D,OAAO,CAAC;QACP,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,uBAAuB;QAChC,MAAM,EAAE,GAAG,EAAE,CAAC;YACb,WAAW,CAAC,MAAM,CAAC;YACnB,WAAW,CAAC,MAAM,EAAE,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;YACpC,WAAW,CAAC,MAAM,EAAE,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;YAClC,WAAW,CAAC,MAAM,EAAE,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;YACpC,WAAW,CAAC,MAAM,EAAE,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;YACpC,WAAW,CAAC,MAAM,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC,CAAC;YACrC,WAAW,CAAC,MAAM,EAAE,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;SACnC;QACD,WAAW,EAAE,GAAG,CAAA;;;;;;;;GAQf;QACD,EAAE,EAAE;;;;;;;;;;GAUH;QACD,GAAG,EAAE,SAAS;KACd,CAAC;CACF,CAAC,CAAA"}