@knadh/oat 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +15 -0
  3. package/css/00-base.css +9 -9
  4. package/css/01-theme.css +1 -0
  5. package/css/accordion.css +7 -5
  6. package/css/button.css +45 -15
  7. package/css/dialog.css +4 -4
  8. package/css/dropdown.css +47 -45
  9. package/css/form.css +33 -18
  10. package/css/sidebar.css +7 -8
  11. package/css/skeleton.css +2 -2
  12. package/css/table.css +1 -1
  13. package/css/toast.css +6 -6
  14. package/css/tooltip.css +3 -3
  15. package/css/utilities.css +10 -10
  16. package/js/dropdown.js +1 -1
  17. package/js/toast.js +9 -22
  18. package/oat.min.css +1 -1
  19. package/oat.min.js +1 -1
  20. package/package.json +1 -1
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License
2
+
3
+ Copyright (c) 2026 Kailash Nadh. https://nadh.in
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,15 @@
1
+ # Oat UI
2
+
3
+ > Semantic, minimal, zero dependencies. ~8KB CSS and JS.
4
+
5
+ Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.
6
+
7
+ Semantic tags and attributes are styled contextually out of the box without classes, forcing best practices, and reducing markup class pollution. A few dynamic components are WebComponents and use minimal JavaScript.
8
+
9
+ I wrote this to use in my own projects after getting sick of the ridiculous bloat, dependencies, and rug-pulls in Javascript UI/component libraries.
10
+
11
+ See live demo and docs at [**oat.ink**](https://oat.ink)
12
+
13
+ -------------
14
+
15
+ <img width="739" height="735" alt="image" src="https://github.com/user-attachments/assets/b0a2f55c-659d-4aab-922c-b13d89eeab36" />
package/css/00-base.css CHANGED
@@ -40,7 +40,7 @@
40
40
  line-height: 1.25;
41
41
 
42
42
  &:first-child {
43
- margin-top: 0;
43
+ margin-block-start: 0;
44
44
  }
45
45
  }
46
46
 
@@ -75,10 +75,10 @@
75
75
  }
76
76
 
77
77
  p {
78
- margin-bottom: var(--space-4);
78
+ margin-block-end: var(--space-4);
79
79
 
80
80
  &:last-child {
81
- margin-bottom: 0;
81
+ margin-block-end: 0;
82
82
  }
83
83
  }
84
84
 
@@ -119,7 +119,7 @@
119
119
  background-color: var(--faint);
120
120
  border-radius: var(--radius-medium);
121
121
  overflow-x: auto;
122
- margin-bottom: var(--space-4);
122
+ margin-block-end: var(--space-4);
123
123
 
124
124
  code {
125
125
  padding: 0;
@@ -129,8 +129,8 @@
129
129
  }
130
130
 
131
131
  blockquote {
132
- border-left: 4px solid var(--border);
133
- padding-left: var(--space-4);
132
+ border-inline-start: 4px solid var(--border);
133
+ padding-inline-start: var(--space-4);
134
134
  margin: var(--space-4) 0;
135
135
  color: var(--muted-foreground);
136
136
  font-style: italic;
@@ -143,8 +143,8 @@
143
143
  }
144
144
 
145
145
  ul, ol {
146
- padding-left: var(--space-6);
147
- margin-bottom: var(--space-4);
146
+ padding-inline-start: var(--space-6);
147
+ margin-block-end: var(--space-4);
148
148
  }
149
149
 
150
150
  ul {
@@ -156,7 +156,7 @@
156
156
  }
157
157
 
158
158
  li {
159
- margin-bottom: var(--space-1);
159
+ margin-block-end: var(--space-1);
160
160
  }
161
161
 
162
162
  mark {
package/css/01-theme.css CHANGED
@@ -76,6 +76,7 @@
76
76
  }
77
77
 
78
78
  [data-theme="dark"] {
79
+ color-scheme: dark;
79
80
  --background: #09090b;
80
81
  --foreground: #fafafa;
81
82
  --card: #18181b;
package/css/accordion.css CHANGED
@@ -41,11 +41,13 @@
41
41
 
42
42
  &::after {
43
43
  content: "";
44
- width: 1rem;
45
- height: 1rem;
46
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
47
- background-size: contain;
48
- background-repeat: no-repeat;
44
+ width: 1em;
45
+ height: 1em;
46
+ flex-shrink: 0;
47
+ background-color: currentColor;
48
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
49
+ mask-size: contain;
50
+ mask-repeat: no-repeat;
49
51
  transition: transform var(--transition-fast);
50
52
  }
51
53
 
package/css/button.css CHANGED
@@ -27,7 +27,7 @@
27
27
  transform: translate(1px, 1px);
28
28
  }
29
29
 
30
- &.secondary {
30
+ &[data-variant="secondary"] {
31
31
  background-color: var(--secondary);
32
32
  color: var(--secondary-foreground);
33
33
  border-color: rgb(from #fff r g b / 0.5) rgb(from #000 r g b / 0.1) rgb(from #000 r g b / 0.1) rgb(from #fff r g b / 0.5);
@@ -37,32 +37,62 @@
37
37
  }
38
38
  }
39
39
 
40
+ &[data-variant="danger"] {
41
+ background-color: var(--danger);
42
+ color: var(--danger-foreground);
43
+
44
+ &:hover:not(:disabled) {
45
+ background-color: color-mix(in srgb, var(--danger), black 15%);
46
+ }
47
+ }
48
+
40
49
  &.outline {
41
50
  background-color: transparent;
42
- color: var(--foreground);
43
51
  border-color: var(--border);
44
52
 
45
- &:hover:not(:disabled) {
53
+ &:not([data-variant]) {
54
+ color: var(--foreground);
55
+ }
56
+ &[data-variant="danger"] {
57
+ color: var(--danger);
58
+ border-color: var(--danger);
59
+ &:hover:not(:disabled) {
60
+ background-color: color-mix(in srgb, var(--danger), transparent 90%);
61
+ }
62
+ }
63
+ &[data-variant="secondary"] {
64
+ color: var(--secondary-foreground);
65
+ border-color: var(--secondary);
66
+ &:hover:not(:disabled) {
67
+ background-color: color-mix(in srgb, var(--secondary), transparent 80%);
68
+ }
69
+ }
70
+ &:hover:not(:disabled):not([data-variant]) {
46
71
  background-color: var(--accent);
47
72
  }
48
73
  }
49
74
 
50
75
  &.ghost {
51
76
  background-color: transparent;
52
- color: var(--foreground);
53
77
  border-color: transparent;
54
78
 
55
- &:hover:not(:disabled) {
56
- background-color: var(--accent);
79
+ &:not([data-variant]) {
80
+ color: var(--foreground);
57
81
  }
58
- }
59
-
60
- &.danger {
61
- background-color: var(--danger);
62
- color: var(--danger-foreground);
63
-
64
- &:hover:not(:disabled) {
65
- background-color: color-mix(in srgb, var(--danger), black 15%);
82
+ &[data-variant="danger"] {
83
+ color: var(--danger);
84
+ &:hover:not(:disabled) {
85
+ background-color: color-mix(in srgb, var(--danger), transparent 90%);
86
+ }
87
+ }
88
+ &[data-variant="secondary"] {
89
+ color: var(--secondary-foreground);
90
+ &:hover:not(:disabled) {
91
+ background-color: color-mix(in srgb, var(--secondary), transparent 80%);
92
+ }
93
+ }
94
+ &:hover:not(:disabled):not([data-variant]) {
95
+ background-color: var(--accent);
66
96
  }
67
97
  }
68
98
 
@@ -94,7 +124,7 @@
94
124
 
95
125
  @layer components {
96
126
  menu.buttons {
97
- padding-left: 0;
127
+ padding-inline-start: 0;
98
128
  display: inline-flex;
99
129
 
100
130
  & > :is(button, [type=button], [type=submit], [type=reset], a.button) {
package/css/dialog.css CHANGED
@@ -58,16 +58,16 @@
58
58
  flex-direction: column;
59
59
  gap: var(--space-1);
60
60
  padding: var(--space-6);
61
- padding-bottom: 0;
61
+ padding-block-end: 0;
62
62
 
63
63
  & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 {
64
- margin-bottom: 0;
64
+ margin-block-end: 0;
65
65
  }
66
66
 
67
67
  & > p {
68
68
  font-size: var(--text-7);
69
69
  color: var(--muted-foreground);
70
- margin-bottom: 0;
70
+ margin-block-end: 0;
71
71
  }
72
72
  }
73
73
 
@@ -83,7 +83,7 @@
83
83
  justify-content: flex-end;
84
84
  gap: var(--space-2);
85
85
  padding: var(--space-6);
86
- padding-top: 0;
86
+ padding-block-start: 0;
87
87
  }
88
88
  }
89
89
  }
package/css/dropdown.css CHANGED
@@ -1,56 +1,58 @@
1
1
  @layer components {
2
- menu[popover] {
3
- position: fixed;
4
- margin: 0;
5
- padding: var(--space-1);
6
- min-width: 12rem;
7
- background-color: var(--background);
8
- border: 1px solid var(--border);
9
- border-radius: var(--radius-medium);
10
- box-shadow: var(--shadow-medium);
11
- opacity: 0;
12
- transform: translateY(-4px);
13
- transition:
14
- opacity 150ms ease-out,
15
- transform 150ms ease-out,
16
- display 150ms allow-discrete,
17
- overlay 150ms allow-discrete;
2
+ ot-dropdown {
3
+ [popover] {
4
+ position: fixed;
5
+ margin: 0;
6
+ /* padding: var(--space-1); */
7
+ min-width: 12rem;
8
+ background-color: var(--background);
9
+ border: 1px solid var(--border);
10
+ border-radius: var(--radius-medium);
11
+ box-shadow: var(--shadow-medium);
12
+ opacity: 0;
13
+ transform: translateY(-4px);
14
+ transition:
15
+ opacity 150ms ease-out,
16
+ transform 150ms ease-out,
17
+ display 150ms allow-discrete,
18
+ overlay 150ms allow-discrete;
18
19
 
19
- &:popover-open {
20
- opacity: 1;
21
- transform: translateY(0);
22
- }
23
-
24
- @starting-style {
25
20
  &:popover-open {
26
- opacity: 0;
27
- transform: translateY(-4px);
21
+ opacity: 1;
22
+ transform: translateY(0);
23
+ }
24
+
25
+ @starting-style {
26
+ &:popover-open {
27
+ opacity: 0;
28
+ transform: translateY(-4px);
29
+ }
28
30
  }
29
- }
30
31
 
31
- hr {
32
- margin: var(--space-1) 0;
32
+ hr {
33
+ margin: var(--space-1) 0;
34
+ }
33
35
  }
34
- }
35
36
 
36
- [role="menuitem"] {
37
- display: flex;
38
- align-items: center;
39
- justify-content: left;
40
- gap: var(--space-2);
41
- width: 100%;
42
- padding: var(--space-2) var(--space-3);
43
- font-size: var(--text-7);
44
- text-align: left;
45
- color: var(--foreground);
46
- background: none;
47
- border: none;
48
- border-radius: var(--radius-small);
49
- cursor: pointer;
37
+ [role="menuitem"] {
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: start;
41
+ gap: var(--space-2);
42
+ width: 100%;
43
+ padding: var(--space-2) var(--space-3);
44
+ font-size: var(--text-7);
45
+ text-align: start;
46
+ color: var(--foreground);
47
+ background: none;
48
+ border: none;
49
+ border-radius: var(--radius-small);
50
+ cursor: pointer;
50
51
 
51
- &:hover, &:focus {
52
- background-color: var(--accent);
53
- outline: none;
52
+ &:hover, &:focus {
53
+ background-color: var(--accent);
54
+ outline: none;
55
+ }
54
56
  }
55
57
  }
56
58
  }
package/css/form.css CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), textarea, select) {
16
16
  width: 100%;
17
- margin-top: var(--space-1);
17
+ margin-block-start: var(--space-1);
18
18
  padding: var(--space-2) var(--space-3);
19
19
  font-size: var(--text-7);
20
20
  line-height: var(--leading-normal);
@@ -59,7 +59,7 @@
59
59
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
60
60
  background-repeat: no-repeat;
61
61
  background-position: right var(--space-2) center;
62
- padding-right: var(--space-6);
62
+ padding-inline-end: var(--space-6);
63
63
  }
64
64
 
65
65
  input:where([type=checkbox], [type=radio]) {
@@ -74,17 +74,22 @@
74
74
  &:checked {
75
75
  background-color: var(--primary);
76
76
  border-color: var(--primary);
77
- background-position: center;
78
- background-repeat: no-repeat;
79
77
  }
80
78
  }
81
79
 
82
80
  input[type=checkbox] {
83
81
  border-radius: var(--radius-small);
84
-
85
- &:checked {
86
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
87
- background-size: 0.75rem;
82
+ position: relative;
83
+
84
+ &:checked::after {
85
+ content: "";
86
+ position: absolute;
87
+ inset: 0;
88
+ background-color: var(--primary-foreground);
89
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
90
+ mask-size: 90%;
91
+ mask-position: center;
92
+ mask-repeat: no-repeat;
88
93
  }
89
94
 
90
95
  &[role=switch] {
@@ -114,7 +119,10 @@
114
119
 
115
120
  &:checked {
116
121
  background-color: var(--primary);
117
- background-image: none;
122
+
123
+ &::after {
124
+ content: none;
125
+ }
118
126
 
119
127
  &::before {
120
128
  transform: translateY(-50%) translateX(var(--switch-height));
@@ -125,10 +133,17 @@
125
133
 
126
134
  input[type=radio] {
127
135
  border-radius: var(--radius-full);
128
-
129
- &:checked {
130
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='white'/%3E%3C/svg%3E");
131
- background-size: 100%;
136
+ position: relative;
137
+
138
+ &:checked::after {
139
+ content: "";
140
+ position: absolute;
141
+ inset: 0;
142
+ background-color: var(--primary-foreground);
143
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
144
+ mask-size: 100%;
145
+ mask-position: center;
146
+ mask-repeat: no-repeat;
132
147
  }
133
148
  }
134
149
 
@@ -170,7 +185,7 @@
170
185
  border: 1px solid var(--border);
171
186
  border-radius: var(--radius-medium);
172
187
  padding: var(--space-4);
173
- margin-bottom: var(--space-4);
188
+ margin-block-end: var(--space-4);
174
189
  }
175
190
 
176
191
  legend {
@@ -190,8 +205,8 @@
190
205
 
191
206
  & > :is(input, textarea, select) {
192
207
  flex: 1;
193
- margin-top: 0;
194
- border-right: 0;
208
+ margin-block-start: 0;
209
+ border-inline-end: 0;
195
210
  }
196
211
 
197
212
  & > :is(input, textarea, select, button) {
@@ -221,14 +236,14 @@
221
236
  }
222
237
 
223
238
  [data-field] {
224
- margin-bottom: var(--space-4);
239
+ margin-block-end: var(--space-4);
225
240
 
226
241
  /* Hint text that succeeds an input with aria-describedby */
227
242
  [data-hint], .error {
228
243
  font-size: var(--text-8);
229
244
  font-weight: var(--font-normal);
230
245
  color: var(--muted-foreground);
231
- margin-top: var(--space-1);
246
+ margin-block-start: var(--space-1);
232
247
  }
233
248
 
234
249
  .error {
package/css/sidebar.css CHANGED
@@ -19,11 +19,11 @@
19
19
  /* <main> immediately after top-nav, adjust for topnav height */
20
20
  > main {
21
21
  min-width: 0;
22
- margin-top: calc(var(--topnav-height));
22
+ margin-block-start: calc(var(--topnav-height));
23
23
 
24
24
  /* Offset #anchor scrolling to not go behind the topnav. */
25
25
  [id] {
26
- scroll-margin-top: calc(var(--topnav-height) + var(--space-6));
26
+ scroll-margin-block-start: calc(var(--topnav-height) + var(--space-6));
27
27
  }
28
28
  }
29
29
  }
@@ -35,7 +35,7 @@
35
35
  height: 100dvh;
36
36
  align-self: start;
37
37
  background-color: var(--background);
38
- border-right: 1px solid var(--border);
38
+ border-inline-end: 1px solid var(--border);
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  width: var(--sidebar-width);
@@ -47,7 +47,7 @@
47
47
 
48
48
  > footer {
49
49
  flex-shrink: 0;
50
- margin-top: auto;
50
+ margin-block-start: auto;
51
51
  padding: var(--space-3);
52
52
  }
53
53
 
@@ -94,7 +94,7 @@
94
94
 
95
95
  & + details { margin-top: 0; }
96
96
  &[open] summary { border-bottom: none; }
97
- > ul { margin-left: var(--space-4); padding: var(--space-1) 0; }
97
+ > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
98
98
  }
99
99
 
100
100
  summary {
@@ -117,9 +117,8 @@
117
117
 
118
118
  nav[data-topnav] {
119
119
  position: fixed;
120
- top: 0;
121
- left: 0;
122
- right: 0;
120
+ inset-block-start: 0;
121
+ inset-inline: 0;
123
122
  z-index: 5;
124
123
  min-height: var(--topnav-height);
125
124
  display: flex;
package/css/skeleton.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  [role="status"].skeleton {
3
- margin-bottom: var(--space-3);
3
+ margin-block-end: var(--space-3);
4
4
  background: var(--muted);
5
5
  border-radius: var(--radius-medium);
6
6
  animation: shimmer 2s infinite;
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  [role="status"].skeleton:last-child {
36
- margin-bottom: 0;
36
+ margin-block-end: 0;
37
37
  }
38
38
 
39
39
  @keyframes shimmer {
package/css/table.css CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  th {
18
18
  padding: var(--space-3) var(--space-2);
19
- text-align: left;
19
+ text-align: start;
20
20
  font-weight: var(--font-medium);
21
21
  color: var(--muted-foreground);
22
22
  }
package/css/toast.css CHANGED
@@ -52,8 +52,8 @@
52
52
  pointer-events: auto;
53
53
  background-color: var(--card);
54
54
  border: 1px solid var(--border);
55
- border-left-width: var(--space-1);
56
- border-left-style: solid;
55
+ border-inline-start-width: var(--space-1);
56
+ border-inline-start-style: solid;
57
57
  border-radius: var(--radius-medium);
58
58
  box-shadow: var(--shadow-small);
59
59
  transition: opacity 150ms, transform 150ms, margin 150ms;
@@ -68,19 +68,19 @@
68
68
  }
69
69
 
70
70
  &[data-variant="success"] {
71
- border-left-color: var(--success);
71
+ border-inline-start-color: var(--success);
72
72
  }
73
73
 
74
74
  &[data-variant="danger"] {
75
- border-left-color: var(--danger);
75
+ border-inline-start-color: var(--danger);
76
76
  }
77
77
 
78
78
  &[data-variant="warning"] {
79
- border-left-color: var(--warning);
79
+ border-inline-start-color: var(--warning);
80
80
  }
81
81
 
82
82
  &[data-variant="info"] {
83
- border-left-color: var(--secondary);
83
+ border-inline-start-color: var(--secondary);
84
84
  }
85
85
 
86
86
  & > [data-close] {
package/css/tooltip.css CHANGED
@@ -6,7 +6,7 @@
6
6
  [data-tooltip]::before,
7
7
  [data-tooltip]::after {
8
8
  position: absolute;
9
- left: 50%;
9
+ inset-inline-start: 50%;
10
10
  opacity: 0;
11
11
  visibility: hidden;
12
12
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
@@ -17,7 +17,7 @@
17
17
  /* Text */
18
18
  [data-tooltip]::after {
19
19
  content: attr(data-tooltip);
20
- bottom: calc(100% + 10px);
20
+ inset-block-end: calc(100% + 10px);
21
21
  transform: translateX(-50%) translateY(4px);
22
22
  padding: var(--space-2) var(--space-3);
23
23
  font-size: var(--text-7);
@@ -31,7 +31,7 @@
31
31
  /* Arrow */
32
32
  [data-tooltip]::before {
33
33
  content: '';
34
- bottom: calc(100% - 5px);
34
+ inset-block-end: calc(100% - 5px);
35
35
  transform: translateX(-50%) translateY(4px);
36
36
  border: 8px solid transparent;
37
37
  border-top-color: var(--foreground);
package/css/utilities.css CHANGED
@@ -15,9 +15,9 @@
15
15
  border-width: 0;
16
16
  }
17
17
 
18
- .text-left { text-align: left; }
18
+ .text-left { text-align: start; }
19
19
  .text-center { text-align: center; }
20
- .text-right { text-align: right; }
20
+ .text-right { text-align: end; }
21
21
  .text-light { color: var(--muted-foreground); }
22
22
  .text-lighter { color: var(--muted-foreground); }
23
23
 
@@ -43,13 +43,13 @@
43
43
  .gap-2 { gap: var(--space-2); }
44
44
  .gap-4 { gap: var(--space-4); }
45
45
 
46
- .mt-2 { margin-top: var(--space-2); }
47
- .mt-4 { margin-top: var(--space-4); }
48
- .mt-6 { margin-top: var(--space-6); }
46
+ .mt-2 { margin-block-start: var(--space-2); }
47
+ .mt-4 { margin-block-start: var(--space-4); }
48
+ .mt-6 { margin-block-start: var(--space-6); }
49
49
 
50
- .mb-2 { margin-bottom: var(--space-2); }
51
- .mb-4 { margin-bottom: var(--space-4); }
52
- .mb-6 { margin-bottom: var(--space-6); }
50
+ .mb-2 { margin-block-end: var(--space-2); }
51
+ .mb-4 { margin-block-end: var(--space-4); }
52
+ .mb-6 { margin-block-end: var(--space-6); }
53
53
  .p-4 { padding: var(--space-4); }
54
54
 
55
55
  .w-100 { width: 100%; }
@@ -58,7 +58,7 @@
58
58
  ul, ol {
59
59
  &.unstyled {
60
60
  list-style: none;
61
- padding-left: 0;
62
- margin-left: 0;
61
+ padding-inline-start: 0;
62
+ margin-inline-start: 0;
63
63
  }
64
64
  }
package/js/dropdown.js CHANGED
@@ -18,7 +18,7 @@ class OtDropdown extends OtBase {
18
18
  #position;
19
19
 
20
20
  init() {
21
- this.#menu = this.$('menu[popover]');
21
+ this.#menu = this.$('[popover]');
22
22
  this.#trigger = this.$('[popovertarget]');
23
23
 
24
24
  if (!this.#menu || !this.#trigger) return;
package/js/toast.js CHANGED
@@ -28,6 +28,7 @@ function getContainer(placement) {
28
28
  document.body.appendChild(el);
29
29
  containers[placement] = el;
30
30
  }
31
+
31
32
  return containers[placement];
32
33
  }
33
34
 
@@ -68,27 +69,18 @@ function show(toast, options = {}) {
68
69
 
69
70
  // Simple text toast.
70
71
  ot.toast = function (message, title, options = {}) {
71
- if (typeof message === 'object' && message !== null) {
72
- options = message;
73
- message = '';
74
- }
75
-
76
- const { variant = '', ...rest } = options;
72
+ const { variant = 'info', ...rest } = options;
77
73
 
78
- // Create toast
79
74
  const toast = document.createElement('output');
80
- toast.className = 'toast';
81
- toast.setAttribute('role', 'status');
82
- if (variant) toast.setAttribute('data-variant', variant);
83
-
84
- const titleText = title || (variant[0].toUpperCase() + variant.slice(1));
85
- const titleEl = document.createElement('h6');
86
- titleEl.className = 'toast-title';
87
- if (variant) {
75
+ toast.setAttribute('data-variant', variant);
76
+
77
+ if (title) {
78
+ const titleEl = document.createElement('h6');
79
+ titleEl.className = 'toast-title';
88
80
  titleEl.style.color = `var(--${variant})`;
81
+ titleEl.textContent = title;
82
+ toast.appendChild(titleEl);
89
83
  }
90
- titleEl.textContent = title || titleText;
91
- toast.appendChild(titleEl);
92
84
 
93
85
  if (message) {
94
86
  const msgEl = document.createElement('div');
@@ -123,12 +115,7 @@ function removeToast(toast, container) {
123
115
  }
124
116
  toast.setAttribute('data-exiting', '');
125
117
 
126
- let done = false;
127
118
  const cleanup = () => {
128
- if (done) {
129
- return;
130
- }
131
- done = true;
132
119
  toast.remove();
133
120
  if (!container.children.length) {
134
121
  container.hidePopover();
package/oat.min.css CHANGED
@@ -1 +1 @@
1
- @layer theme,base,components,animations,utilities;@layer base{*,*:before,*:after{box-sizing:border-box}*{margin:0}html{tab-size:4}body,dialog,[popover]{font-family:var(--font-sans);font-size:var(--text-regular);line-height:var(--leading-normal);color:var(--foreground)}body{background-color:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{max-width:100%}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{font-weight:var(--font-semibold);line-height:1.25;&:first-child{margin-top:0}}h1{font-size:2.25rem;margin:var(--space-10) 0 var(--space-6)}h2{font-size:1.875rem;margin:var(--space-8) 0 var(--space-5)}h3{font-size:1.5rem;margin:var(--space-6) 0 var(--space-4)}h4{font-size:1.25rem;margin:var(--space-5) 0 var(--space-3)}h5{font-size:1.125rem;margin:var(--space-4) 0 var(--space-2)}h6{font-size:var(--text-regular);margin:var(--space-4) 0 var(--space-2)}p{margin-bottom:var(--space-4);&:last-child{margin-bottom:0}}a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;transition:color var(--transition-fast);&:hover{color:rgb(from var(--primary) r g b / .8)}}strong,b{font-weight:var(--font-semibold)}em,i{font-style:italic}small{font-size:var(--text-7)}code{font-family:var(--font-mono);font-size:.875em;padding:.125rem .25rem;background-color:var(--faint);border-radius:var(--radius-small)}pre{font-family:var(--font-mono);padding:var(--space-4);background-color:var(--faint);border-radius:var(--radius-medium);overflow-x:auto;margin-bottom:var(--space-4);code{padding:0;background:none;border-radius:0}}blockquote{border-left:4px solid var(--border);padding-left:var(--space-4);margin:var(--space-4) 0;color:var(--muted-foreground);font-style:italic}hr{border:none;border-top:1px solid var(--border);margin:var(--space-8) 0}ul,ol{padding-left:var(--space-6);margin-bottom:var(--space-4)}ul{list-style-type:disc}ol{list-style-type:decimal}li{margin-bottom:var(--space-1)}mark{background-color:rgb(from var(--warning) r g b / .3);padding:.125rem .25rem;border-radius:var(--radius-small)}:focus-visible{outline:2px solid var(--ring);outline-offset:2px}:disabled{opacity:.5;cursor:not-allowed}}@layer theme{:root{--background: #fff;--foreground: #09090b;--card: #fff;--card-foreground: #09090b;--primary: #574747;--primary-foreground: #fafafa;--secondary: #f4f4f5;--secondary-foreground: #574747;--muted: #f4f4f5;--muted-foreground: #71717a;--faint: #fafafa;--accent: #f4f4f5;--danger: #df514c;--danger-foreground: #fafafa;--success: #4caf50;--success-foreground: #fafafa;--warning: #ff8c00;--warning-foreground: #09090b;--border: #d4d4d8;--input: #d4d4d8;--ring: #574747;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-14: 3.5rem;--space-16: 4rem;--space-18: 4.5rem;--radius-small: .125rem;--radius-medium: .375rem;--radius-large: .75rem;--radius-full: 9999px;--bar-height: .5rem;--font-sans: system-ui, sans-serif;--font-mono: ui-monospace, Consolas, monospace;--text-1: 3rem;--text-2: 2.25rem;--text-3: 1.875rem;--text-4: 1.5rem;--text-5: 1.25rem;--text-6: 1rem;--text-7: .875rem;--text-8: .75rem;--text-regular: var(--text-6);--leading-normal: 1.5;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 600;--shadow-small: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-medium: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-large: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--transition-fast: .12s cubic-bezier(.4, 0, .2, 1);--transition: .2s cubic-bezier(.4, 0, .2, 1);--z-dropdown: 50;--z-modal: 200}[data-theme=dark]{--background: #09090b;--foreground: #fafafa;--card: #18181b;--card-foreground: #fafafa;--primary: #fafafa;--primary-foreground: #18181b;--secondary: #27272a;--secondary-foreground: #fafafa;--muted: #27272a;--muted-foreground: #a1a1aa;--faint: #1e1e21;--accent: #27272a;--danger-foreground: #fafafa;--success-foreground: #fafafa;--warning-foreground: #09090b;--border: #52525b;--input: #52525b;--ring: #d4d4d8}}@layer animations{.animate-pop-in{opacity:1;transform:perspective(1000px) rotateX(0) translateZ(0);transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1),overlay .15s cubic-bezier(.4,0,.2,1) allow-discrete,display .15s cubic-bezier(.4,0,.2,1) allow-discrete;@starting-style{opacity:0;transform:perspective(1000px) rotateX(-15deg) translateZ(-80px)}&[data-state=closing]{opacity:0;transform:perspective(1000px) rotateX(-15deg) translateZ(-80px)}&[data-state=closing]::backdrop{opacity:0}}dialog::backdrop{opacity:1;transition:opacity .15s cubic-bezier(.4,0,.2,1);@starting-style{opacity:0}}.animate-slide-in{opacity:1;transform:translate(0);transition:opacity .15s cubic-bezier(.16,1,.3,1),transform .15s cubic-bezier(.16,1,.3,1);@starting-style{opacity:0;transform:translate(100%)}&[data-state=closing]{opacity:0;transform:translate(100%)}}}@layer base{:is(button,[type=submit],[type=reset],[type=button],a.button){display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-7);font-weight:var(--font-medium);line-height:var(--leading-normal);white-space:nowrap;text-decoration:none;background-color:var(--primary);color:var(--primary-foreground);border-radius:var(--radius-medium);border:1px solid;border-color:rgb(from #fff r g b / .15) rgb(from #000 r g b / .2) rgb(from #000 r g b / .2) rgb(from #fff r g b / .15);transition:background-color var(--transition-fast),opacity var(--transition-fast),transform var(--transition-fast);cursor:pointer;&:hover:not(:disabled){background-color:color-mix(in srgb,var(--primary),white 25%)}&:active:not(:disabled){transform:translate(1px,1px)}&.secondary{background-color:var(--secondary);color:var(--secondary-foreground);border-color:rgb(from #fff r g b / .5) rgb(from #000 r g b / .1) rgb(from #000 r g b / .1) rgb(from #fff r g b / .5);&:hover:not(:disabled){background-color:color-mix(in srgb,var(--secondary),black 10%)}}&.outline{background-color:transparent;color:var(--foreground);border-color:var(--border);&:hover:not(:disabled){background-color:var(--accent)}}&.ghost{background-color:transparent;color:var(--foreground);border-color:transparent;&:hover:not(:disabled){background-color:var(--accent)}}&.danger{background-color:var(--danger);color:var(--danger-foreground);&:hover:not(:disabled){background-color:color-mix(in srgb,var(--danger),black 15%)}}&.small{padding:var(--space-1) var(--space-3);font-size:var(--text-8)}&.large{height:3rem;padding:0 var(--space-6);font-size:var(--text-regular)}&.icon{width:2.5rem;padding:0;&.small{width:2rem}&.large{width:3rem}}}}@layer components{menu.buttons{padding-left:0;display:inline-flex;>:is(button,[type=button],[type=submit],[type=reset],a.button){border-radius:0;&:first-child{border-start-start-radius:var(--radius-medium);border-end-start-radius:var(--radius-medium)}&:last-child{border-start-end-radius:var(--radius-medium);border-end-end-radius:var(--radius-medium)}&:not(:last-child){border-inline-end:1px solid rgb(from var(--primary-foreground) r g b / .2)}}}}@layer base{label{display:block;font-size:var(--text-7);font-weight:var(--font-medium);&:has(input:where([type=checkbox],[type=radio])){display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--font-normal)}}:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),textarea,select){width:100%;margin-top:var(--space-1);padding:var(--space-2) var(--space-3);font-size:var(--text-7);line-height:var(--leading-normal);background-color:var(--background);color:var(--foreground);border:1px solid var(--input);border-radius:var(--radius-medium);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);&::placeholder{color:var(--muted-foreground)}&:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px rgb(from var(--ring) r g b / .2)}&:disabled{background-color:var(--muted)}&:is([aria-invalid=true],:user-invalid){border-color:var(--danger);&:focus{box-shadow:0 0 0 2px rgb(from var(--danger) r g b / .2)}}}textarea{height:auto;min-height:5rem;padding:var(--space-3);resize:vertical}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-2) center;padding-right:var(--space-6)}input:where([type=checkbox],[type=radio]){appearance:none;width:1rem;height:1rem;margin:0;background-color:var(--background);border:1px solid var(--input);transition:background-color var(--transition-fast),border-color var(--transition-fast);&:checked{background-color:var(--primary);border-color:var(--primary);background-position:center;background-repeat:no-repeat}}input[type=checkbox]{border-radius:var(--radius-small);&:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:.75rem}&[role=switch]{--switch-height: calc(var(--bar-height) * 3);--switch-inset: 2px;--switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3);width:calc(var(--switch-height) * 2);height:var(--switch-height);border-radius:var(--radius-full);background-color:var(--input);position:relative;&:before{content:"";position:absolute;top:50%;left:var(--switch-inset);transform:translateY(-50%);width:var(--switch-thumb);height:var(--switch-thumb);background-color:var(--background);border-radius:var(--radius-full);transition:transform var(--transition);box-shadow:var(--shadow-small)}&:checked{background-color:var(--primary);background-image:none;&:before{transform:translateY(-50%) translate(var(--switch-height))}}}}input[type=radio]{border-radius:var(--radius-full);&:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='white'/%3E%3C/svg%3E");background-size:100%}}:where(input:where([type=checkbox],[type=radio],[type=range]),select):not(:disabled),label:has(input:where([type=checkbox],[type=radio]):not(:disabled)){cursor:pointer}input[type=range]{width:100%;height:var(--bar-height);appearance:none;background:var(--muted);border-radius:var(--radius-full);&::-webkit-slider-thumb{appearance:none;width:1.25rem;height:1.25rem;background:var(--primary);border-radius:var(--radius-full);transition:transform var(--transition-fast);&:hover{transform:scale(1.1)}}&::-moz-range-thumb{width:1.25rem;height:1.25rem;background:var(--primary);border:none;border-radius:var(--radius-full)}}fieldset{border:1px solid var(--border);border-radius:var(--radius-medium);padding:var(--space-4);margin-bottom:var(--space-4)}legend{font-size:var(--text-7);font-weight:var(--font-medium);padding:0 var(--space-2)}}@layer components{fieldset.group{display:flex;align-items:stretch;border:none;padding:0;margin:0;>:is(input,textarea,select){flex:1;margin-top:0;border-right:0}>:is(input,textarea,select,button){border-radius:0;&:first-child{border-radius:var(--radius-medium) 0 0 var(--radius-medium)}&:last-child{border-radius:0 var(--radius-medium) var(--radius-medium) 0}}>legend{float:inline-start;display:inline-flex;align-items:center;padding:0 var(--space-3);line-height:var(--leading-normal);font-weight:var(--font-normal);color:var(--muted-foreground);background-color:var(--muted);border:1px solid var(--input);border-inline-end:none;border-radius:var(--radius-medium) 0 0 var(--radius-medium)}}[data-field]{margin-bottom:var(--space-4);[data-hint],.error{font-size:var(--text-8);font-weight:var(--font-normal);color:var(--muted-foreground);margin-top:var(--space-1)}.error{display:none}&[data-field=error] .error{display:block;color:var(--danger)}}}@layer base{table{border-collapse:collapse;table-layout:fixed;width:100%;font-size:var(--text-7)}thead{border-bottom:1px solid var(--border)}th,td{overflow-wrap:break-word}th{padding:var(--space-3) var(--space-2);text-align:left;font-weight:var(--font-medium);color:var(--muted-foreground)}td{padding:var(--space-3) var(--space-2)}tbody tr{border-bottom:1px solid var(--border);transition:background-color var(--transition-fast);&:last-child{border-bottom:none}&:hover{background-color:rgb(from var(--muted) r g b / .5)}}}@layer base{progress{appearance:none;width:100%;height:var(--bar-height);border:none;border-radius:var(--radius-full);overflow:hidden;background-color:var(--muted);&::-webkit-progress-bar{background-color:var(--muted);border-radius:var(--radius-full)}&::-webkit-progress-value{background-color:var(--primary);border-radius:var(--radius-full);transition:width var(--transition)}&::-moz-progress-bar{background-color:var(--primary);border-radius:var(--radius-full)}}meter{appearance:none;width:100%;height:var(--bar-height);border:none;border-radius:var(--radius-full);overflow:hidden;background:var(--muted);&::-webkit-meter-bar{background:var(--muted);border:none;border-radius:var(--radius-full);height:var(--bar-height)}&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{border-radius:var(--radius-full)}&::-webkit-meter-optimum-value{background:var(--success)}&::-webkit-meter-suboptimum-value{background:var(--warning)}&::-webkit-meter-even-less-good-value{background:var(--danger)}&::-moz-meter-bar{background:var(--success);border-radius:var(--radius-full)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--warning)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--danger)}}}@layer components{.spinner{width:1.5rem;height:1.5rem;border:2px solid var(--muted);border-top-color:var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;&.small{width:1rem;height:1rem}&.large{width:2rem;height:2rem;border-width:3px}}@keyframes spin{to{transform:rotate(360deg)}}}@layer components{:root{--grid-cols: 12;--grid-gap: 1.5rem;--container-max: 1280px;--container-pad: 1rem}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}.row{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--grid-gap);width:100%}.col,[class*=col-]{grid-column-end:span var(--span, var(--grid-cols))}.col-1{--span: 1}.col-2{--span: 2}.col-3{--span: 3}.col-4{--span: 4}.col-5{--span: 5}.col-6{--span: 6}.col-7{--span: 7}.col-8{--span: 8}.col-9{--span: 9}.col-10{--span: 10}.col-11{--span: 11}.col-12{--span: 12}.offset-1{grid-column-start:2}.offset-2{grid-column-start:3}.offset-3{grid-column-start:4}.offset-4{grid-column-start:5}.offset-5{grid-column-start:6}.offset-6{grid-column-start:7}.col-end{grid-column-start:span var(--span, 1);grid-column-end:-1}@media(max-width:768px){.row{--grid-cols: 4;--grid-gap: 1rem}.col,[class*=col-]{--span: 4}}}@layer components{.card{background-color:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius-medium);box-shadow:var(--shadow-small);padding:var(--space-6);overflow:hidden}}@layer components{[role=alert]{position:relative;display:flex;gap:var(--space-3);padding:var(--space-4);background-color:var(--background);border:1px solid var(--border);border-radius:var(--radius-medium);font-size:var(--text-7);&[data-variant]{border:none}&[data-variant=error],&[data-variant=danger]{color:var(--danger);background-color:color-mix(in srgb,var(--danger) 8%,white);& a{color:var(--danger)}}&[data-variant=success]{color:var(--success);background-color:color-mix(in srgb,var(--success) 8%,white);& a{color:var(--success)}}&[data-variant=warning]{color:var(--warning);background-color:color-mix(in srgb,var(--warning) 8%,white);& a{color:var(--warning)}}[data-theme=dark] &{&[data-variant=error],&[data-variant=danger]{background-color:color-mix(in srgb,var(--danger) 20%,black)}&[data-variant=success]{background-color:color-mix(in srgb,var(--success) 20%,black)}&[data-variant=warning]{background-color:color-mix(in srgb,var(--warning) 20%,black)}}}}@layer components{.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-4);font-size:var(--text-8);font-weight:var(--font-medium);line-height:var(--leading-normal);background-color:var(--primary);color:var(--primary-foreground);border-radius:var(--radius-full);&.secondary{background-color:var(--secondary);color:var(--secondary-foreground)}&.outline{background-color:transparent;color:var(--foreground);border:1px solid var(--border)}&.success{color:var(--success);background-color:color-mix(in srgb,var(--success) 12%,white)}&.warning{color:var(--warning);background-color:color-mix(in srgb,var(--warning) 12%,white)}&.danger{color:var(--danger);background-color:color-mix(in srgb,var(--danger) 15%,white)}[data-theme=dark] &{&.success{background-color:color-mix(in srgb,var(--success) 40%,black)}&.warning{background-color:color-mix(in srgb,var(--warning) 40%,black)}&.danger{background-color:color-mix(in srgb,var(--danger) 40%,black)}}}}@layer components{details{border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden;+details{margin-top:-1px;border-start-start-radius:0;border-start-end-radius:0}&:has(+details){border-end-start-radius:0;border-end-end-radius:0}&[open] summary{border-bottom:1px solid var(--border)}}summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-4);font-weight:var(--font-medium);cursor:pointer;user-select:none;transition:background-color var(--transition-fast);&:hover{background-color:var(--muted)}&::-webkit-details-marker,&::marker{display:none}&:after{content:"";width:1rem;height:1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;transition:transform var(--transition-fast)}details[open] &:after{transform:rotate(180deg)}}details>*:not(summary){padding:var(--space-4)}}@layer components{[role=tablist]{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);background-color:var(--muted);border-radius:var(--radius-medium)}[role=tab]{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-3);font-size:var(--text-7);font-weight:var(--font-medium);white-space:nowrap;background-color:transparent;color:var(--muted-foreground);border:none;border-radius:calc(var(--radius-medium) - 2px);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast);&:hover{color:var(--foreground)}&[aria-selected=true]{background-color:var(--background);color:var(--foreground);box-shadow:var(--shadow-small)}}[role=tabpanel]{padding:var(--space-4) 0;&:focus-visible{outline:none}}}@layer components{dialog{position:fixed;inset:0;z-index:var(--z-modal);width:100%;max-width:32rem;max-height:85vh;margin:auto;padding:0;background-color:var(--card);border:1px solid var(--border);border-radius:var(--radius-large);box-shadow:var(--shadow-large);overflow:hidden;opacity:0;transform:scale(.95);transition:opacity .15s ease,transform .15s ease,overlay .15s ease allow-discrete,display .15s ease allow-discrete;&[open]{opacity:1;transform:scale(1)}@starting-style{&[open]{opacity:0;transform:scale(.95)}}&::backdrop{background-color:#0000;transition:background-color .15s ease,overlay .15s ease allow-discrete,display .15s ease allow-discrete}&[open]::backdrop{background-color:#00000080}@starting-style{&[open]::backdrop{background-color:#0000}}>header,>form>header{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-6);padding-bottom:0;>h1,>h2,>h3,>h4,>h5,>h6{margin-bottom:0}>p{font-size:var(--text-7);color:var(--muted-foreground);margin-bottom:0}}>p,>div,>section,>form>p,>form>div,>form>section{padding:var(--space-6);overflow-y:auto}>footer,>form>footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-6);padding-top:0}}}@layer components{menu[popover]{position:fixed;margin:0;padding:var(--space-1);min-width:12rem;background-color:var(--background);border:1px solid var(--border);border-radius:var(--radius-medium);box-shadow:var(--shadow-medium);opacity:0;transform:translateY(-4px);transition:opacity .15s ease-out,transform .15s ease-out,display .15s allow-discrete,overlay .15s allow-discrete;&:popover-open{opacity:1;transform:translateY(0)}@starting-style{&:popover-open{opacity:0;transform:translateY(-4px)}}hr{margin:var(--space-1) 0}}[role=menuitem]{display:flex;align-items:center;justify-content:left;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-7);text-align:left;color:var(--foreground);background:none;border:none;border-radius:var(--radius-small);cursor:pointer;&:hover,&:focus{background-color:var(--accent);outline:none}}}@layer components{.toast-container{position:fixed;display:flex;flex-direction:column;pointer-events:none;margin:0;padding:0;border:none;background:transparent;overflow:visible;&::backdrop{display:none}&[data-placement=top-left]{inset:var(--space-4) auto auto var(--space-4)}&[data-placement=top-center]{inset:var(--space-4) auto auto 50%;transform:translate(-50%)}&[data-placement=top-right]{inset:var(--space-4) var(--space-4) auto auto}&[data-placement=bottom-left]{inset:auto auto var(--space-4) var(--space-4);flex-direction:column-reverse}&[data-placement=bottom-center]{inset:auto auto var(--space-4) 50%;transform:translate(-50%);flex-direction:column-reverse}&[data-placement=bottom-right]{inset:auto var(--space-4) var(--space-4) auto;flex-direction:column-reverse}}.toast{padding:var(--space-5) var(--space-4);max-width:28rem;min-width:20rem;pointer-events:auto;background-color:var(--card);border:1px solid var(--border);border-left-width:var(--space-1);border-left-style:solid;border-radius:var(--radius-medium);box-shadow:var(--shadow-small);transition:opacity .15s,transform .15s,margin .15s;line-height:1;.toast-title{font-weight:600;margin:0 0 var(--space-3) 0}.toast-message{color:var(--muted-foreground)}&[data-variant=success]{border-left-color:var(--success)}&[data-variant=danger]{border-left-color:var(--danger)}&[data-variant=warning]{border-left-color:var(--warning)}&[data-variant=info]{border-left-color:var(--secondary)}>[data-close]{margin-inline-start:auto;background:none;border:none;padding:0;cursor:pointer;opacity:.5;&:hover{opacity:1}}margin:var(--space-2) 0;&[data-entering]{opacity:0;transform:translateY(-1rem)}&[data-exiting]{opacity:0;margin:0;padding-block:0;max-height:0;overflow:hidden;transition:opacity .2s,margin .2s,padding .2s,max-height .2s}}}@layer components{:root{--topnav-height: var(--space-12);--sidebar-width: 14rem}[data-sidebar-layout]{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100dvh;gap:var(--space-4);&:has(nav[data-topnav]){>aside[data-sidebar]{top:var(--topnav-height);height:calc(100dvh - var(--topnav-height))}>main{min-width:0;margin-top:calc(var(--topnav-height));[id]{scroll-margin-top:calc(var(--topnav-height) + var(--space-6))}}}>aside[data-sidebar]{position:sticky;top:0;z-index:1;height:100dvh;align-self:start;background-color:var(--background);border-right:1px solid var(--border);display:flex;flex-direction:column;width:var(--sidebar-width);>header{flex-shrink:0;padding:var(--space-3)}>footer{flex-shrink:0;margin-top:auto;padding:var(--space-3)}>nav{flex:1;min-height:0;overflow-y:auto;padding:var(--space-3) var(--space-2)}nav{ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-1);li{margin:0}}a{display:flex;gap:var(--space-2);padding:var(--space-1) var(--space-3);font-size:var(--text-7);color:var(--foreground);text-decoration:none;border-radius:var(--radius-small);transition:background-color var(--transition-fast);&:hover,&[aria-current]{background-color:var(--accent)}}}details{border:none;overflow:visible;+details{margin-top:0}&[open] summary{border-bottom:none}>ul{margin-left:var(--space-4);padding:var(--space-1) 0}}summary{justify-content:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-7);font-weight:var(--font-medium);color:var(--foreground);border-radius:var(--radius-small);&:after{width:.75rem;height:.75rem;margin-inline-start:auto}}}}nav[data-topnav]{position:fixed;top:0;left:0;right:0;z-index:5;min-height:var(--topnav-height);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background-color:var(--background);border-bottom:1px solid var(--border);box-shadow:var(--shadow-small)}[data-sidebar-toggle],[data-sidebar-header]{display:none}[data-sidebar-toggle]{padding:0 var(--space-1);background:none;border:1px solid var(--border);border-radius:var(--radius-small);cursor:pointer}@media(max-width:768px){[data-sidebar-layout]{grid-template-columns:1fr;>aside[data-sidebar]{position:fixed;top:0;left:0;height:100dvh;width:16rem;transform:translate(-100%);transition:transform var(--transition);box-shadow:var(--shadow-large)}&[data-sidebar-open]>aside[data-sidebar]{transform:translate(0)}}[data-sidebar-toggle]{display:inline-block}[data-sidebar-header]{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}}}@layer components{[role=status].skeleton{margin-bottom:var(--space-3);background:var(--muted);border-radius:var(--radius-medium);animation:shimmer 2s infinite;background-size:200% 100%;background-image:linear-gradient(90deg,var(--muted) 0%,color-mix(in srgb,var(--muted) 30%,white) 30%,var(--muted) 100%);[data-theme=dark] &{background-image:linear-gradient(90deg,var(--muted) 0%,color-mix(in srgb,var(--muted) 90%,var(--foreground)) 90%,var(--muted) 100%)}&.box{width:4rem;height:4rem}&.line{height:1rem;width:100%}}[role=status].skeleton:last-child{margin-bottom:0}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}}@layer components{[data-tooltip]{position:relative}[data-tooltip]:before,[data-tooltip]:after{position:absolute;left:50%;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast);pointer-events:none;z-index:1000}[data-tooltip]:after{content:attr(data-tooltip);bottom:calc(100% + 10px);transform:translate(-50%) translateY(4px);padding:var(--space-2) var(--space-3);font-size:var(--text-7);line-height:1;white-space:nowrap;background:var(--foreground);color:var(--background);border-radius:var(--radius-medium)}[data-tooltip]:before{content:"";bottom:calc(100% - 5px);transform:translate(-50%) translateY(4px);border:8px solid transparent;border-top-color:var(--foreground)}[data-tooltip]:is(:hover,:focus-visible):before,[data-tooltip]:is(:hover,:focus-visible):after{opacity:1;visibility:visible;transition-delay:.7s;transform:translate(-50%) translateY(0)}}@layer utilities{[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-light,.text-lighter{color:var(--muted-foreground)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.hstack{display:flex;align-items:center;gap:var(--space-3)}.vstack{display:flex;flex-direction:column;gap:var(--space-3)}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.p-4{padding:var(--space-4)}.w-100{width:100%}}ul,ol{&.unstyled{list-style:none;padding-left:0;margin-left:0}}
1
+ @layer theme,base,components,animations,utilities;@layer base{*,*:before,*:after{box-sizing:border-box}*{margin:0}html{tab-size:4}body,dialog,[popover]{font-family:var(--font-sans);font-size:var(--text-regular);line-height:var(--leading-normal);color:var(--foreground)}body{background-color:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{max-width:100%}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{font-weight:var(--font-semibold);line-height:1.25;&:first-child{margin-block-start:0}}h1{font-size:2.25rem;margin:var(--space-10) 0 var(--space-6)}h2{font-size:1.875rem;margin:var(--space-8) 0 var(--space-5)}h3{font-size:1.5rem;margin:var(--space-6) 0 var(--space-4)}h4{font-size:1.25rem;margin:var(--space-5) 0 var(--space-3)}h5{font-size:1.125rem;margin:var(--space-4) 0 var(--space-2)}h6{font-size:var(--text-regular);margin:var(--space-4) 0 var(--space-2)}p{margin-block-end:var(--space-4);&:last-child{margin-block-end:0}}a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;transition:color var(--transition-fast);&:hover{color:rgb(from var(--primary) r g b / .8)}}strong,b{font-weight:var(--font-semibold)}em,i{font-style:italic}small{font-size:var(--text-7)}code{font-family:var(--font-mono);font-size:.875em;padding:.125rem .25rem;background-color:var(--faint);border-radius:var(--radius-small)}pre{font-family:var(--font-mono);padding:var(--space-4);background-color:var(--faint);border-radius:var(--radius-medium);overflow-x:auto;margin-block-end:var(--space-4);code{padding:0;background:none;border-radius:0}}blockquote{border-inline-start:4px solid var(--border);padding-inline-start:var(--space-4);margin:var(--space-4) 0;color:var(--muted-foreground);font-style:italic}hr{border:none;border-top:1px solid var(--border);margin:var(--space-8) 0}ul,ol{padding-inline-start:var(--space-6);margin-block-end:var(--space-4)}ul{list-style-type:disc}ol{list-style-type:decimal}li{margin-block-end:var(--space-1)}mark{background-color:rgb(from var(--warning) r g b / .3);padding:.125rem .25rem;border-radius:var(--radius-small)}:focus-visible{outline:2px solid var(--ring);outline-offset:2px}:disabled{opacity:.5;cursor:not-allowed}}@layer theme{:root{--background: #fff;--foreground: #09090b;--card: #fff;--card-foreground: #09090b;--primary: #574747;--primary-foreground: #fafafa;--secondary: #f4f4f5;--secondary-foreground: #574747;--muted: #f4f4f5;--muted-foreground: #71717a;--faint: #fafafa;--accent: #f4f4f5;--danger: #df514c;--danger-foreground: #fafafa;--success: #4caf50;--success-foreground: #fafafa;--warning: #ff8c00;--warning-foreground: #09090b;--border: #d4d4d8;--input: #d4d4d8;--ring: #574747;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-14: 3.5rem;--space-16: 4rem;--space-18: 4.5rem;--radius-small: .125rem;--radius-medium: .375rem;--radius-large: .75rem;--radius-full: 9999px;--bar-height: .5rem;--font-sans: system-ui, sans-serif;--font-mono: ui-monospace, Consolas, monospace;--text-1: 3rem;--text-2: 2.25rem;--text-3: 1.875rem;--text-4: 1.5rem;--text-5: 1.25rem;--text-6: 1rem;--text-7: .875rem;--text-8: .75rem;--text-regular: var(--text-6);--leading-normal: 1.5;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 600;--shadow-small: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-medium: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-large: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--transition-fast: .12s cubic-bezier(.4, 0, .2, 1);--transition: .2s cubic-bezier(.4, 0, .2, 1);--z-dropdown: 50;--z-modal: 200}[data-theme=dark]{color-scheme:dark;--background: #09090b;--foreground: #fafafa;--card: #18181b;--card-foreground: #fafafa;--primary: #fafafa;--primary-foreground: #18181b;--secondary: #27272a;--secondary-foreground: #fafafa;--muted: #27272a;--muted-foreground: #a1a1aa;--faint: #1e1e21;--accent: #27272a;--danger-foreground: #fafafa;--success-foreground: #fafafa;--warning-foreground: #09090b;--border: #52525b;--input: #52525b;--ring: #d4d4d8}}@layer animations{.animate-pop-in{opacity:1;transform:perspective(1000px) rotateX(0) translateZ(0);transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1),overlay .15s cubic-bezier(.4,0,.2,1) allow-discrete,display .15s cubic-bezier(.4,0,.2,1) allow-discrete;@starting-style{opacity:0;transform:perspective(1000px) rotateX(-15deg) translateZ(-80px)}&[data-state=closing]{opacity:0;transform:perspective(1000px) rotateX(-15deg) translateZ(-80px)}&[data-state=closing]::backdrop{opacity:0}}dialog::backdrop{opacity:1;transition:opacity .15s cubic-bezier(.4,0,.2,1);@starting-style{opacity:0}}.animate-slide-in{opacity:1;transform:translate(0);transition:opacity .15s cubic-bezier(.16,1,.3,1),transform .15s cubic-bezier(.16,1,.3,1);@starting-style{opacity:0;transform:translate(100%)}&[data-state=closing]{opacity:0;transform:translate(100%)}}}@layer base{:is(button,[type=submit],[type=reset],[type=button],a.button){display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);font-size:var(--text-7);font-weight:var(--font-medium);line-height:var(--leading-normal);white-space:nowrap;text-decoration:none;background-color:var(--primary);color:var(--primary-foreground);border-radius:var(--radius-medium);border:1px solid;border-color:rgb(from #fff r g b / .15) rgb(from #000 r g b / .2) rgb(from #000 r g b / .2) rgb(from #fff r g b / .15);transition:background-color var(--transition-fast),opacity var(--transition-fast),transform var(--transition-fast);cursor:pointer;&:hover:not(:disabled){background-color:color-mix(in srgb,var(--primary),white 25%)}&:active:not(:disabled){transform:translate(1px,1px)}&[data-variant=secondary]{background-color:var(--secondary);color:var(--secondary-foreground);border-color:rgb(from #fff r g b / .5) rgb(from #000 r g b / .1) rgb(from #000 r g b / .1) rgb(from #fff r g b / .5);&:hover:not(:disabled){background-color:color-mix(in srgb,var(--secondary),black 10%)}}&[data-variant=danger]{background-color:var(--danger);color:var(--danger-foreground);&:hover:not(:disabled){background-color:color-mix(in srgb,var(--danger),black 15%)}}&.outline{background-color:transparent;border-color:var(--border);&:not([data-variant]){color:var(--foreground)}&[data-variant=danger]{color:var(--danger);border-color:var(--danger);&:hover:not(:disabled){background-color:color-mix(in srgb,var(--danger),transparent 90%)}}&[data-variant=secondary]{color:var(--secondary-foreground);border-color:var(--secondary);&:hover:not(:disabled){background-color:color-mix(in srgb,var(--secondary),transparent 80%)}}&:hover:not(:disabled):not([data-variant]){background-color:var(--accent)}}&.ghost{background-color:transparent;border-color:transparent;&:not([data-variant]){color:var(--foreground)}&[data-variant=danger]{color:var(--danger);&:hover:not(:disabled){background-color:color-mix(in srgb,var(--danger),transparent 90%)}}&[data-variant=secondary]{color:var(--secondary-foreground);&:hover:not(:disabled){background-color:color-mix(in srgb,var(--secondary),transparent 80%)}}&:hover:not(:disabled):not([data-variant]){background-color:var(--accent)}}&.small{padding:var(--space-1) var(--space-3);font-size:var(--text-8)}&.large{height:3rem;padding:0 var(--space-6);font-size:var(--text-regular)}&.icon{width:2.5rem;padding:0;&.small{width:2rem}&.large{width:3rem}}}}@layer components{menu.buttons{padding-inline-start:0;display:inline-flex;>:is(button,[type=button],[type=submit],[type=reset],a.button){border-radius:0;&:first-child{border-start-start-radius:var(--radius-medium);border-end-start-radius:var(--radius-medium)}&:last-child{border-start-end-radius:var(--radius-medium);border-end-end-radius:var(--radius-medium)}&:not(:last-child){border-inline-end:1px solid rgb(from var(--primary-foreground) r g b / .2)}}}}@layer base{label{display:block;font-size:var(--text-7);font-weight:var(--font-medium);&:has(input:where([type=checkbox],[type=radio])){display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--font-normal)}}:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),textarea,select){width:100%;margin-block-start:var(--space-1);padding:var(--space-2) var(--space-3);font-size:var(--text-7);line-height:var(--leading-normal);background-color:var(--background);color:var(--foreground);border:1px solid var(--input);border-radius:var(--radius-medium);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);&::placeholder{color:var(--muted-foreground)}&:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px rgb(from var(--ring) r g b / .2)}&:disabled{background-color:var(--muted)}&:is([aria-invalid=true],:user-invalid){border-color:var(--danger);&:focus{box-shadow:0 0 0 2px rgb(from var(--danger) r g b / .2)}}}textarea{height:auto;min-height:5rem;padding:var(--space-3);resize:vertical}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-2) center;padding-inline-end:var(--space-6)}input:where([type=checkbox],[type=radio]){appearance:none;width:1rem;height:1rem;margin:0;background-color:var(--background);border:1px solid var(--input);transition:background-color var(--transition-fast),border-color var(--transition-fast);&:checked{background-color:var(--primary);border-color:var(--primary)}}input[type=checkbox]{border-radius:var(--radius-small);position:relative;&:checked:after{content:"";position:absolute;inset:0;background-color:var(--primary-foreground);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");mask-size:90%;mask-position:center;mask-repeat:no-repeat}&[role=switch]{--switch-height: calc(var(--bar-height) * 3);--switch-inset: 2px;--switch-thumb: calc(var(--switch-height) - var(--switch-inset) * 3);width:calc(var(--switch-height) * 2);height:var(--switch-height);border-radius:var(--radius-full);background-color:var(--input);position:relative;&:before{content:"";position:absolute;top:50%;left:var(--switch-inset);transform:translateY(-50%);width:var(--switch-thumb);height:var(--switch-thumb);background-color:var(--background);border-radius:var(--radius-full);transition:transform var(--transition);box-shadow:var(--shadow-small)}&:checked{background-color:var(--primary);&:after{content:none}&:before{transform:translateY(-50%) translate(var(--switch-height))}}}}input[type=radio]{border-radius:var(--radius-full);position:relative;&:checked:after{content:"";position:absolute;inset:0;background-color:var(--primary-foreground);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");mask-size:100%;mask-position:center;mask-repeat:no-repeat}}:where(input:where([type=checkbox],[type=radio],[type=range]),select):not(:disabled),label:has(input:where([type=checkbox],[type=radio]):not(:disabled)){cursor:pointer}input[type=range]{width:100%;height:var(--bar-height);appearance:none;background:var(--muted);border-radius:var(--radius-full);&::-webkit-slider-thumb{appearance:none;width:1.25rem;height:1.25rem;background:var(--primary);border-radius:var(--radius-full);transition:transform var(--transition-fast);&:hover{transform:scale(1.1)}}&::-moz-range-thumb{width:1.25rem;height:1.25rem;background:var(--primary);border:none;border-radius:var(--radius-full)}}fieldset{border:1px solid var(--border);border-radius:var(--radius-medium);padding:var(--space-4);margin-block-end:var(--space-4)}legend{font-size:var(--text-7);font-weight:var(--font-medium);padding:0 var(--space-2)}}@layer components{fieldset.group{display:flex;align-items:stretch;border:none;padding:0;margin:0;>:is(input,textarea,select){flex:1;margin-block-start:0;border-inline-end:0}>:is(input,textarea,select,button){border-radius:0;&:first-child{border-radius:var(--radius-medium) 0 0 var(--radius-medium)}&:last-child{border-radius:0 var(--radius-medium) var(--radius-medium) 0}}>legend{float:inline-start;display:inline-flex;align-items:center;padding:0 var(--space-3);line-height:var(--leading-normal);font-weight:var(--font-normal);color:var(--muted-foreground);background-color:var(--muted);border:1px solid var(--input);border-inline-end:none;border-radius:var(--radius-medium) 0 0 var(--radius-medium)}}[data-field]{margin-block-end:var(--space-4);[data-hint],.error{font-size:var(--text-8);font-weight:var(--font-normal);color:var(--muted-foreground);margin-block-start:var(--space-1)}.error{display:none}&[data-field=error] .error{display:block;color:var(--danger)}}}@layer base{table{border-collapse:collapse;table-layout:fixed;width:100%;font-size:var(--text-7)}thead{border-bottom:1px solid var(--border)}th,td{overflow-wrap:break-word}th{padding:var(--space-3) var(--space-2);text-align:start;font-weight:var(--font-medium);color:var(--muted-foreground)}td{padding:var(--space-3) var(--space-2)}tbody tr{border-bottom:1px solid var(--border);transition:background-color var(--transition-fast);&:last-child{border-bottom:none}&:hover{background-color:rgb(from var(--muted) r g b / .5)}}}@layer base{progress{appearance:none;width:100%;height:var(--bar-height);border:none;border-radius:var(--radius-full);overflow:hidden;background-color:var(--muted);&::-webkit-progress-bar{background-color:var(--muted);border-radius:var(--radius-full)}&::-webkit-progress-value{background-color:var(--primary);border-radius:var(--radius-full);transition:width var(--transition)}&::-moz-progress-bar{background-color:var(--primary);border-radius:var(--radius-full)}}meter{appearance:none;width:100%;height:var(--bar-height);border:none;border-radius:var(--radius-full);overflow:hidden;background:var(--muted);&::-webkit-meter-bar{background:var(--muted);border:none;border-radius:var(--radius-full);height:var(--bar-height)}&::-webkit-meter-optimum-value,&::-webkit-meter-suboptimum-value,&::-webkit-meter-even-less-good-value{border-radius:var(--radius-full)}&::-webkit-meter-optimum-value{background:var(--success)}&::-webkit-meter-suboptimum-value{background:var(--warning)}&::-webkit-meter-even-less-good-value{background:var(--danger)}&::-moz-meter-bar{background:var(--success);border-radius:var(--radius-full)}&:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--warning)}&:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--danger)}}}@layer components{.spinner{width:1.5rem;height:1.5rem;border:2px solid var(--muted);border-top-color:var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;&.small{width:1rem;height:1rem}&.large{width:2rem;height:2rem;border-width:3px}}@keyframes spin{to{transform:rotate(360deg)}}}@layer components{:root{--grid-cols: 12;--grid-gap: 1.5rem;--container-max: 1280px;--container-pad: 1rem}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad)}.row{display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--grid-gap);width:100%}.col,[class*=col-]{grid-column-end:span var(--span, var(--grid-cols))}.col-1{--span: 1}.col-2{--span: 2}.col-3{--span: 3}.col-4{--span: 4}.col-5{--span: 5}.col-6{--span: 6}.col-7{--span: 7}.col-8{--span: 8}.col-9{--span: 9}.col-10{--span: 10}.col-11{--span: 11}.col-12{--span: 12}.offset-1{grid-column-start:2}.offset-2{grid-column-start:3}.offset-3{grid-column-start:4}.offset-4{grid-column-start:5}.offset-5{grid-column-start:6}.offset-6{grid-column-start:7}.col-end{grid-column-start:span var(--span, 1);grid-column-end:-1}@media(max-width:768px){.row{--grid-cols: 4;--grid-gap: 1rem}.col,[class*=col-]{--span: 4}}}@layer components{.card{background-color:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius-medium);box-shadow:var(--shadow-small);padding:var(--space-6);overflow:hidden}}@layer components{[role=alert]{position:relative;display:flex;gap:var(--space-3);padding:var(--space-4);background-color:var(--background);border:1px solid var(--border);border-radius:var(--radius-medium);font-size:var(--text-7);&[data-variant]{border:none}&[data-variant=error],&[data-variant=danger]{color:var(--danger);background-color:color-mix(in srgb,var(--danger) 8%,white);& a{color:var(--danger)}}&[data-variant=success]{color:var(--success);background-color:color-mix(in srgb,var(--success) 8%,white);& a{color:var(--success)}}&[data-variant=warning]{color:var(--warning);background-color:color-mix(in srgb,var(--warning) 8%,white);& a{color:var(--warning)}}[data-theme=dark] &{&[data-variant=error],&[data-variant=danger]{background-color:color-mix(in srgb,var(--danger) 20%,black)}&[data-variant=success]{background-color:color-mix(in srgb,var(--success) 20%,black)}&[data-variant=warning]{background-color:color-mix(in srgb,var(--warning) 20%,black)}}}}@layer components{.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-4);font-size:var(--text-8);font-weight:var(--font-medium);line-height:var(--leading-normal);background-color:var(--primary);color:var(--primary-foreground);border-radius:var(--radius-full);&.secondary{background-color:var(--secondary);color:var(--secondary-foreground)}&.outline{background-color:transparent;color:var(--foreground);border:1px solid var(--border)}&.success{color:var(--success);background-color:color-mix(in srgb,var(--success) 12%,white)}&.warning{color:var(--warning);background-color:color-mix(in srgb,var(--warning) 12%,white)}&.danger{color:var(--danger);background-color:color-mix(in srgb,var(--danger) 15%,white)}[data-theme=dark] &{&.success{background-color:color-mix(in srgb,var(--success) 40%,black)}&.warning{background-color:color-mix(in srgb,var(--warning) 40%,black)}&.danger{background-color:color-mix(in srgb,var(--danger) 40%,black)}}}}@layer components{details{border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden;+details{margin-top:-1px;border-start-start-radius:0;border-start-end-radius:0}&:has(+details){border-end-start-radius:0;border-end-end-radius:0}&[open] summary{border-bottom:1px solid var(--border)}}summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-4);font-weight:var(--font-medium);cursor:pointer;user-select:none;transition:background-color var(--transition-fast);&:hover{background-color:var(--muted)}&::-webkit-details-marker,&::marker{display:none}&:after{content:"";width:1em;height:1em;flex-shrink:0;background-color:currentColor;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");mask-size:contain;mask-repeat:no-repeat;transition:transform var(--transition-fast)}details[open] &:after{transform:rotate(180deg)}}details>*:not(summary){padding:var(--space-4)}}@layer components{[role=tablist]{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1);background-color:var(--muted);border-radius:var(--radius-medium)}[role=tab]{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-3);font-size:var(--text-7);font-weight:var(--font-medium);white-space:nowrap;background-color:transparent;color:var(--muted-foreground);border:none;border-radius:calc(var(--radius-medium) - 2px);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast);&:hover{color:var(--foreground)}&[aria-selected=true]{background-color:var(--background);color:var(--foreground);box-shadow:var(--shadow-small)}}[role=tabpanel]{padding:var(--space-4) 0;&:focus-visible{outline:none}}}@layer components{dialog{position:fixed;inset:0;z-index:var(--z-modal);width:100%;max-width:32rem;max-height:85vh;margin:auto;padding:0;background-color:var(--card);border:1px solid var(--border);border-radius:var(--radius-large);box-shadow:var(--shadow-large);overflow:hidden;opacity:0;transform:scale(.95);transition:opacity .15s ease,transform .15s ease,overlay .15s ease allow-discrete,display .15s ease allow-discrete;&[open]{opacity:1;transform:scale(1)}@starting-style{&[open]{opacity:0;transform:scale(.95)}}&::backdrop{background-color:#0000;transition:background-color .15s ease,overlay .15s ease allow-discrete,display .15s ease allow-discrete}&[open]::backdrop{background-color:#00000080}@starting-style{&[open]::backdrop{background-color:#0000}}>header,>form>header{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-6);padding-block-end:0;>h1,>h2,>h3,>h4,>h5,>h6{margin-block-end:0}>p{font-size:var(--text-7);color:var(--muted-foreground);margin-block-end:0}}>p,>div,>section,>form>p,>form>div,>form>section{padding:var(--space-6);overflow-y:auto}>footer,>form>footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-6);padding-block-start:0}}}@layer components{ot-dropdown{[popover]{position:fixed;margin:0;min-width:12rem;background-color:var(--background);border:1px solid var(--border);border-radius:var(--radius-medium);box-shadow:var(--shadow-medium);opacity:0;transform:translateY(-4px);transition:opacity .15s ease-out,transform .15s ease-out,display .15s allow-discrete,overlay .15s allow-discrete;&:popover-open{opacity:1;transform:translateY(0)}@starting-style{&:popover-open{opacity:0;transform:translateY(-4px)}}hr{margin:var(--space-1) 0}}[role=menuitem]{display:flex;align-items:center;justify-content:start;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-7);text-align:start;color:var(--foreground);background:none;border:none;border-radius:var(--radius-small);cursor:pointer;&:hover,&:focus{background-color:var(--accent);outline:none}}}}@layer components{.toast-container{position:fixed;display:flex;flex-direction:column;pointer-events:none;margin:0;padding:0;border:none;background:transparent;overflow:visible;&::backdrop{display:none}&[data-placement=top-left]{inset:var(--space-4) auto auto var(--space-4)}&[data-placement=top-center]{inset:var(--space-4) auto auto 50%;transform:translate(-50%)}&[data-placement=top-right]{inset:var(--space-4) var(--space-4) auto auto}&[data-placement=bottom-left]{inset:auto auto var(--space-4) var(--space-4);flex-direction:column-reverse}&[data-placement=bottom-center]{inset:auto auto var(--space-4) 50%;transform:translate(-50%);flex-direction:column-reverse}&[data-placement=bottom-right]{inset:auto var(--space-4) var(--space-4) auto;flex-direction:column-reverse}}.toast{padding:var(--space-5) var(--space-4);max-width:28rem;min-width:20rem;pointer-events:auto;background-color:var(--card);border:1px solid var(--border);border-inline-start-width:var(--space-1);border-inline-start-style:solid;border-radius:var(--radius-medium);box-shadow:var(--shadow-small);transition:opacity .15s,transform .15s,margin .15s;line-height:1;.toast-title{font-weight:600;margin:0 0 var(--space-3) 0}.toast-message{color:var(--muted-foreground)}&[data-variant=success]{border-inline-start-color:var(--success)}&[data-variant=danger]{border-inline-start-color:var(--danger)}&[data-variant=warning]{border-inline-start-color:var(--warning)}&[data-variant=info]{border-inline-start-color:var(--secondary)}>[data-close]{margin-inline-start:auto;background:none;border:none;padding:0;cursor:pointer;opacity:.5;&:hover{opacity:1}}margin:var(--space-2) 0;&[data-entering]{opacity:0;transform:translateY(-1rem)}&[data-exiting]{opacity:0;margin:0;padding-block:0;max-height:0;overflow:hidden;transition:opacity .2s,margin .2s,padding .2s,max-height .2s}}}@layer components{:root{--topnav-height: var(--space-12);--sidebar-width: 14rem}[data-sidebar-layout]{display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100dvh;gap:var(--space-4);&:has(nav[data-topnav]){>aside[data-sidebar]{top:var(--topnav-height);height:calc(100dvh - var(--topnav-height))}>main{min-width:0;margin-block-start:calc(var(--topnav-height));[id]{scroll-margin-block-start:calc(var(--topnav-height) + var(--space-6))}}}>aside[data-sidebar]{position:sticky;top:0;z-index:1;height:100dvh;align-self:start;background-color:var(--background);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;width:var(--sidebar-width);>header{flex-shrink:0;padding:var(--space-3)}>footer{flex-shrink:0;margin-block-start:auto;padding:var(--space-3)}>nav{flex:1;min-height:0;overflow-y:auto;padding:var(--space-3) var(--space-2)}nav{ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-1);li{margin:0}}a{display:flex;gap:var(--space-2);padding:var(--space-1) var(--space-3);font-size:var(--text-7);color:var(--foreground);text-decoration:none;border-radius:var(--radius-small);transition:background-color var(--transition-fast);&:hover,&[aria-current]{background-color:var(--accent)}}}details{border:none;overflow:visible;+details{margin-top:0}&[open] summary{border-bottom:none}>ul{margin-inline-start:var(--space-4);padding:var(--space-1) 0}}summary{justify-content:flex-start;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-7);font-weight:var(--font-medium);color:var(--foreground);border-radius:var(--radius-small);&:after{width:.75rem;height:.75rem;margin-inline-start:auto}}}}nav[data-topnav]{position:fixed;inset-block-start:0;inset-inline:0;z-index:5;min-height:var(--topnav-height);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background-color:var(--background);border-bottom:1px solid var(--border);box-shadow:var(--shadow-small)}[data-sidebar-toggle],[data-sidebar-header]{display:none}[data-sidebar-toggle]{padding:0 var(--space-1);background:none;border:1px solid var(--border);border-radius:var(--radius-small);cursor:pointer}@media(max-width:768px){[data-sidebar-layout]{grid-template-columns:1fr;>aside[data-sidebar]{position:fixed;top:0;left:0;height:100dvh;width:16rem;transform:translate(-100%);transition:transform var(--transition);box-shadow:var(--shadow-large)}&[data-sidebar-open]>aside[data-sidebar]{transform:translate(0)}}[data-sidebar-toggle]{display:inline-block}[data-sidebar-header]{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border)}}}@layer components{[role=status].skeleton{margin-block-end:var(--space-3);background:var(--muted);border-radius:var(--radius-medium);animation:shimmer 2s infinite;background-size:200% 100%;background-image:linear-gradient(90deg,var(--muted) 0%,color-mix(in srgb,var(--muted) 30%,white) 30%,var(--muted) 100%);[data-theme=dark] &{background-image:linear-gradient(90deg,var(--muted) 0%,color-mix(in srgb,var(--muted) 90%,var(--foreground)) 90%,var(--muted) 100%)}&.box{width:4rem;height:4rem}&.line{height:1rem;width:100%}}[role=status].skeleton:last-child{margin-block-end:0}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}}@layer components{[data-tooltip]{position:relative}[data-tooltip]:before,[data-tooltip]:after{position:absolute;inset-inline-start:50%;opacity:0;visibility:hidden;transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast);pointer-events:none;z-index:1000}[data-tooltip]:after{content:attr(data-tooltip);inset-block-end:calc(100% + 10px);transform:translate(-50%) translateY(4px);padding:var(--space-2) var(--space-3);font-size:var(--text-7);line-height:1;white-space:nowrap;background:var(--foreground);color:var(--background);border-radius:var(--radius-medium)}[data-tooltip]:before{content:"";inset-block-end:calc(100% - 5px);transform:translate(-50%) translateY(4px);border:8px solid transparent;border-top-color:var(--foreground)}[data-tooltip]:is(:hover,:focus-visible):before,[data-tooltip]:is(:hover,:focus-visible):after{opacity:1;visibility:visible;transition-delay:.7s;transform:translate(-50%) translateY(0)}}@layer utilities{[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.text-left{text-align:start}.text-center{text-align:center}.text-right{text-align:end}.text-light,.text-lighter{color:var(--muted-foreground)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.hstack{display:flex;align-items:center;gap:var(--space-3)}.vstack{display:flex;flex-direction:column;gap:var(--space-3)}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.mt-2{margin-block-start:var(--space-2)}.mt-4{margin-block-start:var(--space-4)}.mt-6{margin-block-start:var(--space-6)}.mb-2{margin-block-end:var(--space-2)}.mb-4{margin-block-end:var(--space-4)}.mb-6{margin-block-end:var(--space-6)}.p-4{padding:var(--space-4)}.w-100{width:100%}}ul,ol{&.unstyled{list-style:none;padding-inline-start:0;margin-inline-start:0}}
package/oat.min.js CHANGED
@@ -1 +1 @@
1
- class OtBase extends HTMLElement{#t=!1;connectedCallback(){this.#t||(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.#e(),{once:!0}):this.#e())}#e(){this.#t||(this.#t=!0,this.init())}init(){}disconnectedCallback(){this.cleanup()}cleanup(){}handleEvent(t){const n=this[`on${t.type}`];n&&n.call(this,t)}emit(t,n=null){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,cancelable:!0,detail:n}))}getBool(t){return this.hasAttribute(t)}setBool(t,n){n?this.setAttribute(t,""):this.removeAttribute(t)}$(t){return this.querySelector(t)}$$(t){return Array.from(this.querySelectorAll(t))}uid(){return Math.random().toString(36).slice(2,10)}}typeof window<"u"&&(window.OtBase=OtBase),"commandForElement"in HTMLButtonElement.prototype||document.addEventListener("click",e=>{const t=e.target.closest("[commandfor]");if(!t)return;const n=document.getElementById(t.getAttribute("commandfor"));if(!n)return;const i=t.getAttribute("command")||"toggle";n instanceof HTMLDialogElement&&(i==="show-modal"?n.showModal():i==="close"||n.open?n.close():n.showModal())});class OtTabs extends OtBase{#t=[];#e=[];init(){const t=this.$(':scope > [role="tablist"]');if(this.#t=t?[...t.querySelectorAll('[role="tab"]')]:[],this.#e=this.$$(':scope > [role="tabpanel"]'),this.#t.length===0||this.#e.length===0){console.warn("ot-tabs: Missing tab or tabpanel elements");return}this.#t.forEach((i,o)=>{const s=this.#e[o];if(!s)return;const a=i.id||`ot-tab-${this.uid()}`,r=s.id||`ot-panel-${this.uid()}`;i.id=a,s.id=r,i.setAttribute("aria-controls",r),s.setAttribute("aria-labelledby",a),i.addEventListener("click",this),i.addEventListener("keydown",this)});const n=this.#t.findIndex(i=>i.ariaSelected==="true");this.#n(n>=0?n:0)}onclick(t){const n=this.#t.indexOf(t.target.closest('[role="tab"]'));n>=0&&this.#n(n)}onkeydown(t){const{key:n}=t,i=this.activeIndex;let o=i;switch(n){case"ArrowLeft":t.preventDefault(),o=i-1,o<0&&(o=this.#t.length-1);break;case"ArrowRight":t.preventDefault(),o=(i+1)%this.#t.length;break;default:return}this.#n(o),this.#t[o].focus()}#n(t){this.#t.forEach((n,i)=>{const o=i===t;n.ariaSelected=String(o),n.tabIndex=o?0:-1}),this.#e.forEach((n,i)=>{n.hidden=i!==t}),this.emit("ot-tab-change",{index:t,tab:this.#t[t]})}get activeIndex(){return this.#t.findIndex(t=>t.ariaSelected==="true")}set activeIndex(t){t>=0&&t<this.#t.length&&this.#n(t)}}customElements.define("ot-tabs",OtTabs);class OtDropdown extends OtBase{#t;#e;#n;init(){this.#t=this.$("menu[popover]"),this.#e=this.$("[popovertarget]"),!(!this.#t||!this.#e)&&(this.#t.addEventListener("toggle",this),this.#t.addEventListener("keydown",this),this.#n=()=>{const t=this.#e.getBoundingClientRect();this.#t.style.top=`${t.bottom}px`,this.#t.style.left=`${t.left}px`})}ontoggle(t){t.newState==="open"?(this.#n(),window.addEventListener("scroll",this.#n,!0),this.$('[role="menuitem"]')?.focus(),this.#e.ariaExpanded="true"):(window.removeEventListener("scroll",this.#n,!0),this.#e.ariaExpanded="false",this.#e.focus())}onkeydown(t){if(!t.target.matches('[role="menuitem"]'))return;const n=this.$$('[role="menuitem"]'),i=n.indexOf(t.target);switch(t.key){case"ArrowDown":t.preventDefault(),n[(i+1)%n.length]?.focus();break;case"ArrowUp":t.preventDefault(),n[i-1<0?n.length-1:i-1]?.focus();break}}cleanup(){window.removeEventListener("scroll",this.#n,!0)}}customElements.define("ot-dropdown",OtDropdown);const ot=window.ot||(window.ot={}),containers={},DEFAULT_DURATION=4e3,DEFAULT_PLACEMENT="top-right";function getContainer(e){if(!containers[e]){const t=document.createElement("div");t.className="toast-container",t.setAttribute("popover","manual"),t.setAttribute("data-placement",e),document.body.appendChild(t),containers[e]=t}return containers[e]}function show(e,t={}){const{placement:n=DEFAULT_PLACEMENT,duration:i=DEFAULT_DURATION}=t,o=getContainer(n);e.classList.add("toast");let s;return e.onmouseenter=()=>clearTimeout(s),e.onmouseleave=()=>{i>0&&(s=setTimeout(()=>removeToast(e,o),i))},e.setAttribute("data-entering",""),o.appendChild(e),o.showPopover(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.removeAttribute("data-entering")})}),i>0&&(s=setTimeout(()=>removeToast(e,o),i)),e}ot.toast=function(e,t,n={}){typeof e=="object"&&e!==null&&(n=e,e="");const{variant:i="",...o}=n,s=document.createElement("output");s.className="toast",s.setAttribute("role","status"),i&&s.setAttribute("data-variant",i);const a=t||i[0].toUpperCase()+i.slice(1),r=document.createElement("h6");if(r.className="toast-title",i&&(r.style.color=`var(--${i})`),r.textContent=t||a,s.appendChild(r),e){const l=document.createElement("div");l.className="toast-message",l.textContent=e,s.appendChild(l)}return show(s,o)},ot.toastEl=function(e,t={}){let n;return e instanceof HTMLTemplateElement?n=e.content.firstElementChild.cloneNode(!0):typeof e=="string"?n=document.querySelector(e).cloneNode(!0):n=e.cloneNode(!0),n.removeAttribute("id"),show(n,t)};function removeToast(e,t){if(e.hasAttribute("data-exiting"))return;e.setAttribute("data-exiting","");let n=!1;const i=()=>{n||(n=!0,e.remove(),t.children.length||t.hidePopover())};e.addEventListener("transitionend",i,{once:!0}),setTimeout(i,200)}ot.toast.clear=function(e){e&&containers[e]?(containers[e].innerHTML="",containers[e].hidePopover()):Object.values(containers).forEach(t=>{t.innerHTML="",t.hidePopover()})},document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("[title]").forEach(e=>{const t=e.getAttribute("title");t&&(e.setAttribute("data-tooltip",t),e.hasAttribute("aria-label")||e.setAttribute("aria-label",t),e.removeAttribute("title"))})}),document.addEventListener("click",e=>{const t=e.target.closest("[data-sidebar-toggle]");t&&t.closest("[data-sidebar-layout]")?.toggleAttribute("data-sidebar-open")});
1
+ class OtBase extends HTMLElement{#t=!1;connectedCallback(){this.#t||(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>this.#e(),{once:!0}):this.#e())}#e(){this.#t||(this.#t=!0,this.init())}init(){}disconnectedCallback(){this.cleanup()}cleanup(){}handleEvent(t){const e=this[`on${t.type}`];e&&e.call(this,t)}emit(t,e=null){return this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,cancelable:!0,detail:e}))}getBool(t){return this.hasAttribute(t)}setBool(t,e){e?this.setAttribute(t,""):this.removeAttribute(t)}$(t){return this.querySelector(t)}$$(t){return Array.from(this.querySelectorAll(t))}uid(){return Math.random().toString(36).slice(2,10)}}typeof window<"u"&&(window.OtBase=OtBase),"commandForElement"in HTMLButtonElement.prototype||document.addEventListener("click",n=>{const t=n.target.closest("[commandfor]");if(!t)return;const e=document.getElementById(t.getAttribute("commandfor"));if(!e)return;const i=t.getAttribute("command")||"toggle";e instanceof HTMLDialogElement&&(i==="show-modal"?e.showModal():i==="close"||e.open?e.close():e.showModal())});class OtTabs extends OtBase{#t=[];#e=[];init(){const t=this.$(':scope > [role="tablist"]');if(this.#t=t?[...t.querySelectorAll('[role="tab"]')]:[],this.#e=this.$$(':scope > [role="tabpanel"]'),this.#t.length===0||this.#e.length===0){console.warn("ot-tabs: Missing tab or tabpanel elements");return}this.#t.forEach((i,o)=>{const s=this.#e[o];if(!s)return;const r=i.id||`ot-tab-${this.uid()}`,a=s.id||`ot-panel-${this.uid()}`;i.id=r,s.id=a,i.setAttribute("aria-controls",a),s.setAttribute("aria-labelledby",r),i.addEventListener("click",this),i.addEventListener("keydown",this)});const e=this.#t.findIndex(i=>i.ariaSelected==="true");this.#n(e>=0?e:0)}onclick(t){const e=this.#t.indexOf(t.target.closest('[role="tab"]'));e>=0&&this.#n(e)}onkeydown(t){const{key:e}=t,i=this.activeIndex;let o=i;switch(e){case"ArrowLeft":t.preventDefault(),o=i-1,o<0&&(o=this.#t.length-1);break;case"ArrowRight":t.preventDefault(),o=(i+1)%this.#t.length;break;default:return}this.#n(o),this.#t[o].focus()}#n(t){this.#t.forEach((e,i)=>{const o=i===t;e.ariaSelected=String(o),e.tabIndex=o?0:-1}),this.#e.forEach((e,i)=>{e.hidden=i!==t}),this.emit("ot-tab-change",{index:t,tab:this.#t[t]})}get activeIndex(){return this.#t.findIndex(t=>t.ariaSelected==="true")}set activeIndex(t){t>=0&&t<this.#t.length&&this.#n(t)}}customElements.define("ot-tabs",OtTabs);class OtDropdown extends OtBase{#t;#e;#n;init(){this.#t=this.$("[popover]"),this.#e=this.$("[popovertarget]"),!(!this.#t||!this.#e)&&(this.#t.addEventListener("toggle",this),this.#t.addEventListener("keydown",this),this.#n=()=>{const t=this.#e.getBoundingClientRect();this.#t.style.top=`${t.bottom}px`,this.#t.style.left=`${t.left}px`})}ontoggle(t){t.newState==="open"?(this.#n(),window.addEventListener("scroll",this.#n,!0),this.$('[role="menuitem"]')?.focus(),this.#e.ariaExpanded="true"):(window.removeEventListener("scroll",this.#n,!0),this.#e.ariaExpanded="false",this.#e.focus())}onkeydown(t){if(!t.target.matches('[role="menuitem"]'))return;const e=this.$$('[role="menuitem"]'),i=e.indexOf(t.target);switch(t.key){case"ArrowDown":t.preventDefault(),e[(i+1)%e.length]?.focus();break;case"ArrowUp":t.preventDefault(),e[i-1<0?e.length-1:i-1]?.focus();break}}cleanup(){window.removeEventListener("scroll",this.#n,!0)}}customElements.define("ot-dropdown",OtDropdown);const ot=window.ot||(window.ot={}),containers={},DEFAULT_DURATION=4e3,DEFAULT_PLACEMENT="top-right";function getContainer(n){if(!containers[n]){const t=document.createElement("div");t.className="toast-container",t.setAttribute("popover","manual"),t.setAttribute("data-placement",n),document.body.appendChild(t),containers[n]=t}return containers[n]}function show(n,t={}){const{placement:e=DEFAULT_PLACEMENT,duration:i=DEFAULT_DURATION}=t,o=getContainer(e);n.classList.add("toast");let s;return n.onmouseenter=()=>clearTimeout(s),n.onmouseleave=()=>{i>0&&(s=setTimeout(()=>removeToast(n,o),i))},n.setAttribute("data-entering",""),o.appendChild(n),o.showPopover(),requestAnimationFrame(()=>{requestAnimationFrame(()=>{n.removeAttribute("data-entering")})}),i>0&&(s=setTimeout(()=>removeToast(n,o),i)),n}ot.toast=function(n,t,e={}){const{variant:i="info",...o}=e,s=document.createElement("output");if(s.setAttribute("data-variant",i),t){const r=document.createElement("h6");r.className="toast-title",r.style.color=`var(--${i})`,r.textContent=t,s.appendChild(r)}if(n){const r=document.createElement("div");r.className="toast-message",r.textContent=n,s.appendChild(r)}return show(s,o)},ot.toastEl=function(n,t={}){let e;return n instanceof HTMLTemplateElement?e=n.content.firstElementChild.cloneNode(!0):typeof n=="string"?e=document.querySelector(n).cloneNode(!0):e=n.cloneNode(!0),e.removeAttribute("id"),show(e,t)};function removeToast(n,t){if(n.hasAttribute("data-exiting"))return;n.setAttribute("data-exiting","");const e=()=>{n.remove(),t.children.length||t.hidePopover()};n.addEventListener("transitionend",e,{once:!0}),setTimeout(e,200)}ot.toast.clear=function(n){n&&containers[n]?(containers[n].innerHTML="",containers[n].hidePopover()):Object.values(containers).forEach(t=>{t.innerHTML="",t.hidePopover()})},document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("[title]").forEach(n=>{const t=n.getAttribute("title");t&&(n.setAttribute("data-tooltip",t),n.hasAttribute("aria-label")||n.setAttribute("aria-label",t),n.removeAttribute("title"))})}),document.addEventListener("click",n=>{const t=n.target.closest("[data-sidebar-toggle]");t&&t.closest("[data-sidebar-layout]")?.toggleAttribute("data-sidebar-open")});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knadh/oat",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "license": "MIT",
5
5
  "author": "Kailash Nadh",
6
6
  "homepage": "https://oat.ink",