@e280/shiny 0.1.0-2 → 0.1.0-21

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 (247) hide show
  1. package/README.md +51 -63
  2. package/package.json +19 -26
  3. package/s/_archive/components/button/component.ts +30 -0
  4. package/s/_archive/components/button/showcase.ts +119 -0
  5. package/s/_archive/components/button/style.css.ts +63 -0
  6. package/s/{ui → _archive/components}/copy/component.ts +12 -5
  7. package/s/_archive/components/copy/showcase.ts +51 -0
  8. package/s/{ui → _archive/components}/copy/style.css.ts +6 -6
  9. package/s/_archive/components/drawer/component.ts +90 -0
  10. package/s/_archive/components/drawer/control.ts +31 -0
  11. package/s/_archive/components/drawer/showcase.ts +111 -0
  12. package/s/_archive/components/drawer/style.css.ts +127 -0
  13. package/s/{ui → _archive/components}/example/component.ts +6 -4
  14. package/s/_archive/components/example/showcase.ts +32 -0
  15. package/s/{ui → _archive/components}/example/style.css.ts +2 -2
  16. package/s/_archive/components/foundation.css.ts +15 -0
  17. package/s/{ui → _archive/components}/framework.ts +1 -2
  18. package/s/_archive/components/raw-components.ts +15 -0
  19. package/s/_archive/components/tabs/component.ts +70 -0
  20. package/s/_archive/components/tabs/control.ts +31 -0
  21. package/s/_archive/components/tabs/showcase.ts +171 -0
  22. package/s/_archive/components/tabs/style.css.ts +46 -0
  23. package/s/_archive/demo/demo.bundle.ts +47 -0
  24. package/s/{demo → _archive/demo}/demo.css +1 -0
  25. package/s/_archive/demo/lipsum.ts +6 -0
  26. package/s/_archive/demo/utils/lipsum.ts +19 -0
  27. package/s/_archive/demo/views/exhibit/style.css.ts +85 -0
  28. package/s/_archive/demo/views/exhibit/view.ts +61 -0
  29. package/s/_archive/demo/views/showcase/style.css.ts +53 -0
  30. package/s/_archive/demo/views/showcase/view.ts +54 -0
  31. package/s/_archive/demo/viewsets.ts +12 -0
  32. package/s/_archive/index.html.ts +34 -0
  33. package/s/_archive/index.ts +19 -0
  34. package/s/_archive/install/aura.bundle.ts +9 -0
  35. package/s/_archive/install/plain.bundle.ts +9 -0
  36. package/s/{shiny.ts → _archive/shiny.ts} +2 -2
  37. package/s/_archive/themes/aura.css.ts +86 -0
  38. package/s/_archive/themes/index.barrel.ts +4 -0
  39. package/s/{themes → _archive/themes}/index.ts +1 -0
  40. package/s/_archive/themes/infra/css-vars.ts +46 -0
  41. package/s/_archive/themes/plain.css.ts +11 -0
  42. package/s/_archive/utils/states.ts +15 -0
  43. package/s/demo/globals.d.ts +3 -0
  44. package/s/demo/main.bundle.ts +16 -0
  45. package/s/demo/main.css +71 -0
  46. package/s/demo/parts/exhibit.ts +15 -0
  47. package/s/demo/utils/lipsum.ts +19 -0
  48. package/s/demo/views/codebox/style.css.ts +45 -0
  49. package/s/demo/views/codebox/use-prism-styles.ts +13 -0
  50. package/s/demo/views/codebox/view.ts +39 -0
  51. package/s/demo/views/showcase/style.css.ts +80 -0
  52. package/s/demo/views/showcase/view.ts +50 -0
  53. package/s/demo/views/stylebox/view.ts +21 -0
  54. package/s/icons/tabler/menu-2.svg.ts +4 -0
  55. package/s/icons/tabler/x.svg.ts +4 -0
  56. package/s/index.html.ts +42 -32
  57. package/s/index.ts +6 -7
  58. package/s/test.ts +5 -0
  59. package/s/theme/parts/core.ts +34 -0
  60. package/s/theme/parts/reset.ts +20 -0
  61. package/s/theme/parts/vars.ts +41 -0
  62. package/s/theme/theme-string.ts +15 -0
  63. package/s/theme/theme.css.ts +7 -0
  64. package/s/utils/states.ts +15 -0
  65. package/s/views/button/showcase.ts +43 -0
  66. package/s/views/button/style.css.ts +110 -0
  67. package/s/views/button/view.ts +32 -0
  68. package/s/views/copy/parts/copy-status.ts +3 -0
  69. package/s/views/copy/parts/determine-base-status.ts +7 -0
  70. package/s/views/copy/parts/use-copier.ts +20 -0
  71. package/s/views/copy/showcase.ts +54 -0
  72. package/s/views/copy/style.css.ts +51 -0
  73. package/s/views/copy/view.ts +60 -0
  74. package/s/views/drawer/control.ts +31 -0
  75. package/s/views/drawer/showcase.ts +83 -0
  76. package/s/views/drawer/style.css.ts +128 -0
  77. package/s/views/drawer/view.ts +76 -0
  78. package/s/views/tabs/control.ts +31 -0
  79. package/s/views/tabs/showcase.ts +89 -0
  80. package/s/views/tabs/style.css.ts +46 -0
  81. package/s/views/tabs/view.ts +66 -0
  82. package/x/{demo → _archive/demo}/demo.css +1 -0
  83. package/x/demo/main.bundle.js +13 -0
  84. package/x/demo/main.bundle.js.map +1 -0
  85. package/x/demo/main.bundle.min.js +811 -0
  86. package/x/demo/main.bundle.min.js.map +7 -0
  87. package/x/demo/main.css +71 -0
  88. package/x/demo/parts/exhibit.d.ts +11 -0
  89. package/x/demo/parts/exhibit.js +2 -0
  90. package/x/demo/parts/exhibit.js.map +1 -0
  91. package/x/demo/utils/lipsum.d.ts +2 -0
  92. package/x/demo/utils/lipsum.js +11 -0
  93. package/x/demo/utils/lipsum.js.map +1 -0
  94. package/x/demo/views/codebox/style.css.js +44 -0
  95. package/x/demo/views/codebox/style.css.js.map +1 -0
  96. package/x/demo/views/codebox/use-prism-styles.d.ts +1 -0
  97. package/x/demo/views/codebox/use-prism-styles.js +12 -0
  98. package/x/demo/views/codebox/use-prism-styles.js.map +1 -0
  99. package/x/demo/views/codebox/view.d.ts +2 -0
  100. package/x/demo/views/codebox/view.js +29 -0
  101. package/x/demo/views/codebox/view.js.map +1 -0
  102. package/x/demo/views/showcase/style.css.js +79 -0
  103. package/x/demo/views/showcase/style.css.js.map +1 -0
  104. package/x/demo/views/showcase/view.d.ts +2 -0
  105. package/x/demo/views/showcase/view.js +44 -0
  106. package/x/demo/views/showcase/view.js.map +1 -0
  107. package/x/demo/views/stylebox/view.d.ts +3 -0
  108. package/x/demo/views/stylebox/view.js +13 -0
  109. package/x/demo/views/stylebox/view.js.map +1 -0
  110. package/x/icons/tabler/menu-2.svg.d.ts +2 -0
  111. package/x/icons/tabler/menu-2.svg.js +3 -0
  112. package/x/icons/tabler/menu-2.svg.js.map +1 -0
  113. package/x/icons/tabler/x.svg.d.ts +2 -0
  114. package/x/icons/tabler/x.svg.js +3 -0
  115. package/x/icons/tabler/x.svg.js.map +1 -0
  116. package/x/index.d.ts +6 -5
  117. package/x/index.html +212 -61
  118. package/x/index.html.js +40 -29
  119. package/x/index.html.js.map +1 -1
  120. package/x/index.js +6 -5
  121. package/x/index.js.map +1 -1
  122. package/x/test.js +3 -0
  123. package/x/test.js.map +1 -0
  124. package/x/theme/parts/core.d.ts +1 -0
  125. package/x/theme/parts/core.js +33 -0
  126. package/x/theme/parts/core.js.map +1 -0
  127. package/x/theme/parts/reset.d.ts +1 -0
  128. package/x/theme/parts/reset.js +19 -0
  129. package/x/theme/parts/reset.js.map +1 -0
  130. package/x/theme/parts/vars.d.ts +1 -0
  131. package/x/theme/parts/vars.js +34 -0
  132. package/x/theme/parts/vars.js.map +1 -0
  133. package/x/theme/theme-string.d.ts +1 -0
  134. package/x/theme/theme-string.js +14 -0
  135. package/x/theme/theme-string.js.map +1 -0
  136. package/x/theme/theme.css.d.ts +1 -0
  137. package/x/theme/theme.css.js +4 -0
  138. package/x/theme/theme.css.js.map +1 -0
  139. package/x/utils/states.d.ts +5 -0
  140. package/x/utils/states.js +13 -0
  141. package/x/utils/states.js.map +1 -0
  142. package/x/views/button/showcase.d.ts +1 -0
  143. package/x/views/button/showcase.js +41 -0
  144. package/x/views/button/showcase.js.map +1 -0
  145. package/x/views/button/style.css.js +109 -0
  146. package/x/views/button/style.css.js.map +1 -0
  147. package/x/views/button/view.d.ts +5 -0
  148. package/x/views/button/view.js +23 -0
  149. package/x/views/button/view.js.map +1 -0
  150. package/x/views/copy/parts/copy-status.d.ts +1 -0
  151. package/x/views/copy/parts/copy-status.js +2 -0
  152. package/x/views/copy/parts/copy-status.js.map +1 -0
  153. package/x/views/copy/parts/determine-base-status.d.ts +1 -0
  154. package/x/views/copy/parts/determine-base-status.js +6 -0
  155. package/x/views/copy/parts/determine-base-status.js.map +1 -0
  156. package/x/views/copy/parts/use-copier.d.ts +6 -0
  157. package/x/views/copy/parts/use-copier.js +13 -0
  158. package/x/views/copy/parts/use-copier.js.map +1 -0
  159. package/x/views/copy/showcase.d.ts +1 -0
  160. package/x/views/copy/showcase.js +51 -0
  161. package/x/views/copy/showcase.js.map +1 -0
  162. package/x/views/copy/style.css.d.ts +2 -0
  163. package/x/{ui → views}/copy/style.css.js +14 -9
  164. package/x/views/copy/style.css.js.map +1 -0
  165. package/x/views/copy/view.d.ts +4 -0
  166. package/x/views/copy/view.js +49 -0
  167. package/x/views/copy/view.js.map +1 -0
  168. package/x/views/drawer/control.d.ts +9 -0
  169. package/x/views/drawer/control.js +24 -0
  170. package/x/views/drawer/control.js.map +1 -0
  171. package/x/views/drawer/showcase.d.ts +1 -0
  172. package/x/views/drawer/showcase.js +75 -0
  173. package/x/views/drawer/showcase.js.map +1 -0
  174. package/x/views/drawer/style.css.d.ts +2 -0
  175. package/x/views/drawer/style.css.js +127 -0
  176. package/x/views/drawer/style.css.js.map +1 -0
  177. package/x/views/drawer/view.d.ts +6 -0
  178. package/x/views/drawer/view.js +60 -0
  179. package/x/views/drawer/view.js.map +1 -0
  180. package/x/views/tabs/control.d.ts +9 -0
  181. package/x/views/tabs/control.js +24 -0
  182. package/x/views/tabs/control.js.map +1 -0
  183. package/x/views/tabs/showcase.d.ts +1 -0
  184. package/x/views/tabs/showcase.js +86 -0
  185. package/x/views/tabs/showcase.js.map +1 -0
  186. package/x/views/tabs/style.css.d.ts +2 -0
  187. package/x/views/tabs/style.css.js +45 -0
  188. package/x/views/tabs/style.css.js.map +1 -0
  189. package/x/views/tabs/view.d.ts +5 -0
  190. package/x/views/tabs/view.js +52 -0
  191. package/x/views/tabs/view.js.map +1 -0
  192. package/s/demo/demo.bundle.ts +0 -42
  193. package/s/demo/views/demonstration/style.css.ts +0 -108
  194. package/s/demo/views/demonstration/view.ts +0 -49
  195. package/s/install.bundle.ts +0 -9
  196. package/s/themes/basic.css.ts +0 -18
  197. package/s/themes/index.barrel.ts +0 -3
  198. package/s/ui/raw-components.ts +0 -9
  199. package/x/demo/demo.bundle.js +0 -37
  200. package/x/demo/demo.bundle.js.map +0 -1
  201. package/x/demo/demo.bundle.min.js +0 -277
  202. package/x/demo/demo.bundle.min.js.map +0 -7
  203. package/x/demo/views/demonstration/style.css.js +0 -107
  204. package/x/demo/views/demonstration/style.css.js.map +0 -1
  205. package/x/demo/views/demonstration/view.d.ts +0 -10
  206. package/x/demo/views/demonstration/view.js +0 -36
  207. package/x/demo/views/demonstration/view.js.map +0 -1
  208. package/x/install.bundle.js +0 -5
  209. package/x/install.bundle.js.map +0 -1
  210. package/x/install.bundle.min.js +0 -135
  211. package/x/install.bundle.min.js.map +0 -7
  212. package/x/shiny.d.ts +0 -14
  213. package/x/shiny.js +0 -8
  214. package/x/shiny.js.map +0 -1
  215. package/x/tests.test.d.ts +0 -1
  216. package/x/tests.test.js +0 -3
  217. package/x/tests.test.js.map +0 -1
  218. package/x/themes/basic.css.d.ts +0 -1
  219. package/x/themes/basic.css.js +0 -17
  220. package/x/themes/basic.css.js.map +0 -1
  221. package/x/themes/index.barrel.d.ts +0 -1
  222. package/x/themes/index.barrel.js +0 -2
  223. package/x/themes/index.barrel.js.map +0 -1
  224. package/x/themes/index.d.ts +0 -1
  225. package/x/themes/index.js +0 -2
  226. package/x/themes/index.js.map +0 -1
  227. package/x/ui/copy/component.d.ts +0 -372
  228. package/x/ui/copy/component.js +0 -56
  229. package/x/ui/copy/component.js.map +0 -1
  230. package/x/ui/copy/style.css.js.map +0 -1
  231. package/x/ui/example/component.d.ts +0 -371
  232. package/x/ui/example/component.js +0 -20
  233. package/x/ui/example/component.js.map +0 -1
  234. package/x/ui/example/style.css.js +0 -10
  235. package/x/ui/example/style.css.js.map +0 -1
  236. package/x/ui/framework.d.ts +0 -8
  237. package/x/ui/framework.js +0 -6
  238. package/x/ui/framework.js.map +0 -1
  239. package/x/ui/raw-components.d.ts +0 -6
  240. package/x/ui/raw-components.js +0 -7
  241. package/x/ui/raw-components.js.map +0 -1
  242. /package/s/{tests.test.ts → _archive/tests.test.ts} +0 -0
  243. /package/x/demo/{demo.bundle.d.ts → main.bundle.d.ts} +0 -0
  244. /package/x/demo/views/{demonstration → codebox}/style.css.d.ts +0 -0
  245. /package/x/{ui/copy → demo/views/showcase}/style.css.d.ts +0 -0
  246. /package/x/{install.bundle.d.ts → test.d.ts} +0 -0
  247. /package/x/{ui/example → views/button}/style.css.d.ts +0 -0
package/x/index.html CHANGED
@@ -1,42 +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=d02d3cf0536d"></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
- --link: cyan;
17
18
 
18
- --selection: white;
19
- --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, 150ms);
20
38
  }
39
+
21
40
  }
41
+ @layer reset {
22
42
 
23
- @layer core {
24
43
  * {
25
- margin: 0;
26
- padding: 0;
27
- box-sizing: border-box;
44
+ margin: 0;
45
+ padding: 0;
46
+ box-sizing: border-box;
28
47
 
29
- scrollbar-width: thin;
30
- scrollbar-color: #444 transparent;
48
+ scrollbar-width: thin;
49
+ scrollbar-color: #888 transparent;
31
50
  }
32
51
 
33
- :not(:defined) {
34
- 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
+
35
57
  }
58
+ @layer core {
36
59
 
37
60
  ::selection {
38
- color: var(--selection);
39
- background-color: var(--selection-bg);
61
+ color: var(--selection);
62
+ background-color: var(--selection-bg);
40
63
  }
41
64
 
42
65
  ::-webkit-scrollbar { width: 8px; }
@@ -45,25 +68,28 @@
45
68
  ::-webkit-scrollbar-thumb:hover { background: #666; }
46
69
 
47
70
  a {
48
- color: var(--link);
49
- text-decoration: none;
71
+ color: var(--link);
72
+ text-decoration: none;
50
73
 
51
- &:visited {
52
- color: color-mix(in srgb, purple, var(--link) 70%);
53
- }
74
+ &amp;:visited {
75
+ color: color-mix(in srgb, purple, var(--link) 70%);
76
+ }
54
77
 
55
- &:hover {
56
- color: color-mix(in srgb, white, var(--link) 90%);
57
- text-decoration: underline;
58
- }
78
+ &amp;:hover {
79
+ color: color-mix(in srgb, white, var(--link) 90%);
80
+ text-decoration: underline;
81
+ }
59
82
 
60
- &:active {
61
- color: color-mix(in srgb, white, var(--link) 50%);
62
- }
83
+ &amp;:active {
84
+ color: color-mix(in srgb, white, var(--link) 50%);
85
+ }
63
86
  }
87
+
64
88
  }
65
89
 
66
- @layer page {
90
+ </style>
91
+ <style>
92
+ @layer view {
67
93
  :root {
68
94
  height: 100%;
69
95
  font-size: 16px;
@@ -72,7 +98,7 @@ a {
72
98
  color-scheme: dark;
73
99
  scrollbar-gutter: stable;
74
100
 
75
- color: var(--color);
101
+ color: var(--alpha);
76
102
  background: var(--bg);
77
103
 
78
104
  --tint: #070429aa;
@@ -123,37 +149,162 @@ body > section {
123
149
  flex-direction: column;
124
150
  align-items: center;
125
151
  justify-content: center;
126
- 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);
127
159
  }
128
160
  }
129
161
 
130
162
  </style>
131
- <script type=module src="demo/demo.bundle.min.js?v=b0dc5fb52cc5"></script>
132
- <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
+ }
133
223
 
134
- <meta name="theme-color" content="#d068ff">
135
- <meta property="og:type" content="website">
136
- <meta property="og:site_name" content="@e280/shiny">
137
- <meta property="og:title" content="shiny">
138
- <meta property="og:description" content="✨ web ui components">
139
- <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
+ }
140
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>
141
286
 
142
287
 
143
- </head>
144
- <body>
288
+ <meta property="og:type" content="website">
289
+ <meta property="og:title" content="✨shiny✨">
290
+ <meta property="og:description" content="web ui library">
291
+ <meta property="og:site_name" content="@e280/shiny">
292
+ <meta name="theme-color" content="#d068ff">
293
+ <meta property="og:image" content="https://shiny.e280.org/assets/favicon.png">
145
294
 
146
- <h1>
147
- <strong>✨shiny✨</strong>
148
- <small>v0.1.0-2</small>
149
- </h1>
150
295
 
151
- <section>
152
- <p>web ui components</p>
153
- <p><a href="https://github.com/e280/shiny#readme">readme</a></p>
154
- </section>
296
+ </head>
297
+ <body>
298
+ <h1>
299
+ <strong>✨shiny✨</strong>
300
+ <small>v0.1.0-21</small>
301
+ </h1>
155
302
 
156
- <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>
157
307
 
158
- </body>
159
- </html>
308
+ <div class="gallery"></div>
309
+ </body>
310
+ </html>
package/x/index.html.js CHANGED
@@ -1,33 +1,44 @@
1
- import { ssg, html } from "@e280/scute";
2
- const title = "shiny";
3
- const description = "✨ web ui components";
4
- const domain = "shiny.e280.org";
1
+ import { template, html, socialCard } from "@e280/scute";
2
+ import { themeString } from "./theme/theme-string.js";
5
3
  const favicon = "/assets/favicon.png";
6
- export default ssg.page(import.meta.url, async (orb) => ({
7
- title,
8
- js: "demo/demo.bundle.min.js",
9
- css: "demo/demo.css",
10
- favicon,
11
- dark: true,
12
- socialCard: {
13
- themeColor: "#d068ff",
14
- title,
15
- description,
16
- siteName: "@e280/shiny",
17
- image: "https://" + domain + favicon,
18
- },
19
- body: html `
20
- <h1>
21
- <strong>✨shiny✨</strong>
22
- <small>v${orb.packageVersion()}</small>
23
- </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>
24
12
 
25
- <section>
26
- <p>web ui components</p>
27
- <p><a href="https://github.com/e280/shiny#readme">readme</a></p>
28
- </section>
13
+ <title>shiny</title>
14
+ <link rel="icon" href="${favicon}"/>
15
+ <script type="module" src="${orb.hashurl("demo/main.bundle.min.js")}"></script>
29
16
 
30
- <shiny-demo></shiny-demo>
31
- `,
32
- }));
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
+ `);
33
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,KAAK,GAAG,OAAO,CAAA;AACrB,MAAM,WAAW,GAAG,qBAAqB,CAAA;AACzC,MAAM,MAAM,GAAG,gBAAgB,CAAA;AAC/B,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;IACL,EAAE,EAAE,yBAAyB;IAC7B,GAAG,EAAE,eAAe;IACpB,OAAO;IACP,IAAI,EAAE,IAAI;IACV,UAAU,EAAE;QACX,UAAU,EAAE,SAAS;QACrB,KAAK;QACL,WAAW;QACX,QAAQ,EAAE,aAAa;QACvB,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO;KACpC;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,6 +1,7 @@
1
- export * from "./themes/index.js";
2
- export * from "./ui/example/component.js";
3
- export * from "./ui/copy/component.js";
4
- export * from "./ui/framework.js";
5
- export * from "./shiny.js";
1
+ export * from "./views/button/view.js";
2
+ export * from "./views/copy/view.js";
3
+ export * from "./views/drawer/control.js";
4
+ export * from "./views/drawer/view.js";
5
+ export * from "./views/tabs/control.js";
6
+ export * from "./views/tabs/view.js";
6
7
  //# 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,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AAEjC,cAAc,YAAY,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,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": "150ms",
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/utils/states.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare class States {
2
+ #private;
3
+ constructor(element: HTMLElement);
4
+ assign(...states: string[]): this;
5
+ }
package/x/utils/states.js ADDED
@@ -0,0 +1,13 @@
1
+ export class States {
2
+ #states;
3
+ constructor(element) {
4
+ this.#states = element.attachInternals().states;
5
+ }
6
+ assign(...states) {
7
+ this.#states.forEach(s => this.#states.delete(s));
8
+ for (const s of states)
9
+ this.#states.add(s);
10
+ return this;
11
+ }
12
+ }
13
+ //# sourceMappingURL=states.js.map
package/x/utils/states.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"states.js","sourceRoot":"","sources":["../../s/utils/states.ts"],"names":[],"mappings":"AACA,MAAM,OAAO,MAAM;IAClB,OAAO,CAAa;IAEpB,YAAY,OAAoB;QAC/B,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC,MAAa,CAAA;IACvD,CAAC;IAED,MAAM,CAAC,GAAG,MAAgB;QACzB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;QACjD,KAAK,MAAM,CAAC,IAAI,MAAM;YAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;QAC3C,OAAO,IAAI,CAAA;IACZ,CAAC;CACD"}
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"}