@knadh/oat 0.2.0 → 0.3.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 (10) hide show
  1. package/css/00-base.css +5 -5
  2. package/css/01-theme.css +5 -5
  3. package/css/alert.css +11 -18
  4. package/css/badge.css +9 -17
  5. package/css/button.css +11 -1
  6. package/css/grid.css +10 -2
  7. package/css/sidebar.css +77 -45
  8. package/js/toast.js +3 -3
  9. package/oat.min.css +1 -1
  10. package/package.json +1 -1
package/css/00-base.css CHANGED
@@ -45,27 +45,27 @@
45
45
  }
46
46
 
47
47
  h1 {
48
- font-size: 2.25rem;
48
+ font-size: var(--text-1);
49
49
  margin: var(--space-10) 0 var(--space-6);
50
50
  }
51
51
 
52
52
  h2 {
53
- font-size: 1.875rem;
53
+ font-size: var(--text-2);
54
54
  margin: var(--space-8) 0 var(--space-5);
55
55
  }
56
56
 
57
57
  h3 {
58
- font-size: 1.5rem;
58
+ font-size: var(--text-3);
59
59
  margin: var(--space-6) 0 var(--space-4);
60
60
  }
61
61
 
62
62
  h4 {
63
- font-size: 1.25rem;
63
+ font-size: var(--text-4);
64
64
  margin: var(--space-5) 0 var(--space-3);
65
65
  }
66
66
 
67
67
  h5 {
68
- font-size: 1.125rem;
68
+ font-size: var(--text-5);
69
69
  margin: var(--space-4) 0 var(--space-2);
70
70
  }
71
71
 
package/css/01-theme.css CHANGED
@@ -47,11 +47,11 @@
47
47
  --font-sans: system-ui, sans-serif;
48
48
  --font-mono: ui-monospace, Consolas, monospace;
49
49
 
50
- --text-1: 3rem;
51
- --text-2: 2.25rem;
52
- --text-3: 1.875rem;
53
- --text-4: 1.5rem;
54
- --text-5: 1.25rem;
50
+ --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
51
+ --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
52
+ --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
53
+ --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
54
+ --text-5: 1.125rem;
55
55
  --text-6: 1rem;
56
56
  --text-7: 0.875rem;
57
57
  --text-8: 0.75rem;
package/css/alert.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @layer components {
2
2
  [role="alert"] {
3
+ --bg-amount: 8%;
4
+
3
5
  position: relative;
4
6
  display: flex;
5
7
  gap: var(--space-3);
@@ -9,13 +11,18 @@
9
11
  border-radius: var(--radius-medium);
10
12
  font-size: var(--text-7);
11
13
 
14
+ [data-theme="dark"] & {
15
+ --bg-amount: 20%;
16
+ }
17
+
12
18
  &[data-variant] {
13
19
  border: none;
14
20
  }
15
21
 
16
- &[data-variant="error"], &[data-variant="danger"] {
22
+ &[data-variant="error"],
23
+ &[data-variant="danger"] {
17
24
  color: var(--danger);
18
- background-color: color-mix(in srgb, var(--danger) 8%, white);
25
+ background-color: color-mix(in srgb, var(--danger) var(--bg-amount), transparent);
19
26
 
20
27
  & a {
21
28
  color: var(--danger);
@@ -24,7 +31,7 @@
24
31
 
25
32
  &[data-variant="success"] {
26
33
  color: var(--success);
27
- background-color: color-mix(in srgb, var(--success) 8%, white);
34
+ background-color: color-mix(in srgb, var(--success) var(--bg-amount), transparent);
28
35
 
29
36
  & a {
30
37
  color: var(--success);
@@ -33,25 +40,11 @@
33
40
 
34
41
  &[data-variant="warning"] {
35
42
  color: var(--warning);
36
- background-color: color-mix(in srgb, var(--warning) 8%, white);
43
+ background-color: color-mix(in srgb, var(--warning) var(--bg-amount), transparent);
37
44
 
38
45
  & a {
39
46
  color: var(--warning);
40
47
  }
41
48
  }
42
-
43
- [data-theme="dark"] & {
44
- &[data-variant="error"], &[data-variant="danger"] {
45
- background-color: color-mix(in srgb, var(--danger) 20%, black);
46
- }
47
-
48
- &[data-variant="success"] {
49
- background-color: color-mix(in srgb, var(--success) 20%, black);
50
- }
51
-
52
- &[data-variant="warning"] {
53
- background-color: color-mix(in srgb, var(--warning) 20%, black);
54
- }
55
- }
56
49
  }
57
50
  }
package/css/badge.css CHANGED
@@ -1,5 +1,7 @@
1
1
  @layer components {
2
2
  .badge {
3
+ --bg-amount: 12%;
4
+
3
5
  display: inline-flex;
4
6
  align-items: center;
5
7
  gap: var(--space-1);
@@ -11,6 +13,10 @@
11
13
  color: var(--primary-foreground);
12
14
  border-radius: var(--radius-full);
13
15
 
16
+ [data-theme="dark"] & {
17
+ --bg-amount: 40%;
18
+ }
19
+
14
20
  &.secondary {
15
21
  background-color: var(--secondary);
16
22
  color: var(--secondary-foreground);
@@ -24,31 +30,17 @@
24
30
 
25
31
  &.success {
26
32
  color: var(--success);
27
- background-color: color-mix(in srgb, var(--success) 12%, white);
33
+ background-color: color-mix(in srgb, var(--success) var(--bg-amount), transparent);
28
34
  }
29
35
 
30
36
  &.warning {
31
37
  color: var(--warning);
32
- background-color: color-mix(in srgb, var(--warning) 12%, white);
38
+ background-color: color-mix(in srgb, var(--warning) var(--bg-amount), transparent);
33
39
  }
34
40
 
35
41
  &.danger {
36
42
  color: var(--danger);
37
- background-color: color-mix(in srgb, var(--danger) 15%, white);
38
- }
39
-
40
- [data-theme="dark"] & {
41
- &.success {
42
- background-color: color-mix(in srgb, var(--success) 40%, black);
43
- }
44
-
45
- &.warning {
46
- background-color: color-mix(in srgb, var(--warning) 40%, black);
47
- }
48
-
49
- &.danger {
50
- background-color: color-mix(in srgb, var(--danger) 40%, black);
51
- }
43
+ background-color: color-mix(in srgb, var(--danger) var(--bg-amount), transparent);
52
44
  }
53
45
  }
54
46
  }
package/css/button.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer base {
2
- :is(button, [type=submit], [type=reset], [type=button], a.button) {
2
+ :is(button, [type=submit], [type=reset], [type=button], a.button), ::file-selector-button {
3
3
  display: inline-flex;
4
4
  align-items: center;
5
5
  justify-content: center;
@@ -120,6 +120,16 @@
120
120
  }
121
121
  }
122
122
  }
123
+
124
+ ::file-selector-button {
125
+ background-color: transparent;
126
+ color: var(--foreground);
127
+ border: 1px solid var(--border);
128
+ }
129
+ ::file-selector-button:hover {
130
+ /* pseudoelement:hover can't be nested and has to be a separate block. */
131
+ background-color: var(--accent);
132
+ }
123
133
  }
124
134
 
125
135
  @layer components {
package/css/grid.css CHANGED
@@ -51,7 +51,15 @@
51
51
 
52
52
  /* Responsive: stack on mobile */
53
53
  @media (max-width: 768px) {
54
- .row { --grid-cols: 4; --grid-gap: 1rem; }
55
- .col, [class*="col-"] { --span: 4; } /* full width */
54
+ .row {
55
+ --grid-cols: 4;
56
+ --grid-gap: 1rem;
57
+ }
58
+ .col, [class*="col-"] {
59
+ --span: 4;
60
+ }
61
+ [class*="offset-"] {
62
+ grid-column-start: auto;
63
+ }
56
64
  }
57
65
  }
package/css/sidebar.css CHANGED
@@ -5,34 +5,33 @@
5
5
  }
6
6
 
7
7
  [data-sidebar-layout] {
8
+ --topnav-offset: 0px;
9
+ --topnav-scroll-offset: 0px;
10
+
8
11
  display: grid;
9
12
  grid-template-columns: var(--sidebar-width) 1fr;
10
13
  min-height: 100dvh;
11
14
  gap: var(--space-4);
12
15
 
13
16
  &:has(nav[data-topnav]) {
14
- > aside[data-sidebar] {
15
- top: var(--topnav-height);
16
- height: calc(100dvh - var(--topnav-height));
17
- }
17
+ --topnav-offset: var(--topnav-height);
18
+ --topnav-scroll-offset: calc(var(--topnav-height) + var(--space-6));
19
+ }
18
20
 
19
- /* <main> immediately after top-nav, adjust for topnav height */
20
- > main {
21
- min-width: 0;
22
- margin-block-start: calc(var(--topnav-height));
21
+ > main {
22
+ min-width: 0;
23
+ margin-block-start: var(--topnav-offset);
23
24
 
24
- /* Offset #anchor scrolling to not go behind the topnav. */
25
- [id] {
26
- scroll-margin-block-start: calc(var(--topnav-height) + var(--space-6));
27
- }
25
+ [id] {
26
+ scroll-margin-block-start: var(--topnav-scroll-offset);
28
27
  }
29
28
  }
30
29
 
31
30
  > aside[data-sidebar] {
32
31
  position: sticky;
33
- top: 0;
32
+ top: var(--topnav-offset);
34
33
  z-index: 1;
35
- height: 100dvh;
34
+ height: calc(100dvh - var(--topnav-offset));
36
35
  align-self: start;
37
36
  background-color: var(--background);
38
37
  border-inline-end: 1px solid var(--border);
@@ -40,15 +39,13 @@
40
39
  flex-direction: column;
41
40
  width: var(--sidebar-width);
42
41
 
43
- > header {
42
+ > :is(header, footer) {
44
43
  flex-shrink: 0;
45
44
  padding: var(--space-3);
46
45
  }
47
46
 
48
47
  > footer {
49
- flex-shrink: 0;
50
48
  margin-block-start: auto;
51
- padding: var(--space-3);
52
49
  }
53
50
 
54
51
  > nav {
@@ -56,9 +53,7 @@
56
53
  min-height: 0;
57
54
  overflow-y: auto;
58
55
  padding: var(--space-3) var(--space-2);
59
- }
60
56
 
61
- nav {
62
57
  ul {
63
58
  list-style: none;
64
59
  padding: 0;
@@ -82,34 +77,34 @@
82
77
  border-radius: var(--radius-small);
83
78
  transition: background-color var(--transition-fast);
84
79
 
85
- &:hover, &[aria-current] {
80
+ &:is(:hover, [aria-current]) {
86
81
  background-color: var(--accent);
87
82
  }
88
83
  }
89
- }
90
84
 
91
- details {
92
- border: none;
93
- overflow: visible;
85
+ details {
86
+ border: none;
87
+ overflow: visible;
94
88
 
95
- & + details { margin-top: 0; }
96
- &[open] summary { border-bottom: none; }
97
- > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
98
- }
89
+ & + details { margin-top: 0; }
90
+ &[open] summary { border-bottom: none; }
91
+ > ul { margin-inline-start: var(--space-4); padding: var(--space-1) 0; }
92
+ }
99
93
 
100
- summary {
101
- justify-content: flex-start;
102
- gap: var(--space-2);
103
- padding: var(--space-2) var(--space-3);
104
- font-size: var(--text-7);
105
- font-weight: var(--font-medium);
106
- color: var(--foreground);
107
- border-radius: var(--radius-small);
108
-
109
- &::after {
110
- width: 0.75rem;
111
- height: 0.75rem;
112
- margin-inline-start: auto;
94
+ summary {
95
+ justify-content: flex-start;
96
+ gap: var(--space-2);
97
+ padding: var(--space-2) var(--space-3);
98
+ font-size: var(--text-7);
99
+ font-weight: var(--font-medium);
100
+ color: var(--foreground);
101
+ border-radius: var(--radius-small);
102
+
103
+ &::after {
104
+ width: 0.75rem;
105
+ height: 0.75rem;
106
+ margin-inline-start: auto;
107
+ }
113
108
  }
114
109
  }
115
110
  }
@@ -130,8 +125,7 @@
130
125
  box-shadow: var(--shadow-small);
131
126
  }
132
127
 
133
- [data-sidebar-toggle],
134
- [data-sidebar-header] {
128
+ :is([data-sidebar-toggle], [data-sidebar-header]) {
135
129
  display: none;
136
130
  }
137
131
 
@@ -143,15 +137,43 @@
143
137
  cursor: pointer;
144
138
  }
145
139
 
140
+ [data-sidebar-layout="always"] [data-sidebar-toggle] {
141
+ display: inline-block;
142
+ }
143
+
144
+ [data-sidebar-layout="always"] {
145
+ transition: grid-template-columns var(--transition);
146
+
147
+ > aside[data-sidebar] {
148
+ transform: translateX(0);
149
+ opacity: 1;
150
+ transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
151
+ }
152
+ }
153
+
154
+ [data-sidebar-layout="always"][data-sidebar-open] {
155
+ grid-template-columns: 0px 1fr;
156
+ gap: 0;
157
+
158
+ > aside[data-sidebar] {
159
+ overflow: hidden;
160
+ min-width: 0;
161
+ transform: translateX(-100%);
162
+ opacity: 0;
163
+ visibility: hidden;
164
+ border-inline-end: none;
165
+ }
166
+ }
167
+
146
168
  @media (max-width: 768px) {
147
169
  [data-sidebar-layout] {
148
170
  grid-template-columns: 1fr;
149
171
 
150
172
  > aside[data-sidebar] {
151
173
  position: fixed;
152
- top: 0;
174
+ top: var(--topnav-offset);
153
175
  left: 0;
154
- height: 100dvh;
176
+ height: calc(100dvh - var(--topnav-offset));
155
177
  width: 16rem;
156
178
  transform: translateX(-100%);
157
179
  transition: transform var(--transition);
@@ -162,6 +184,16 @@
162
184
  transform: translateX(0);
163
185
  }
164
186
  }
187
+ [data-sidebar-layout="always"][data-sidebar-open] {
188
+ grid-template-columns: 1fr;
189
+ gap: var(--space-4);
190
+
191
+ > aside[data-sidebar] {
192
+ opacity: 1;
193
+ visibility: visible;
194
+ transform: translateX(0);
195
+ }
196
+ }
165
197
 
166
198
  [data-sidebar-toggle] { display: inline-block; }
167
199
 
package/js/toast.js CHANGED
@@ -3,9 +3,9 @@
3
3
  *
4
4
  * Usage:
5
5
  * ot.toast('Saved!')
6
- * ot.toast('Saved!', 'Your changes have been saved.')
7
- * ot.toast('Success', 'Operation completed.', { variant: 'success' })
8
- * ot.toast('Error', 'Something went wrong.', { variant: 'danger', placement: 'bottom-center' })
6
+ * ot.toast('Action completed successfully', 'All good')
7
+ * ot.toast('Operation completed.', 'Success', { variant: 'success' })
8
+ * ot.toast('Something went wrong.', 'Error', { variant: 'danger', placement: 'bottom-center' })
9
9
  *
10
10
  * // Custom markup
11
11
  * ot.toastEl(element)
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-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}}
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:var(--text-1);margin:var(--space-10) 0 var(--space-6)}h2{font-size:var(--text-2);margin:var(--space-8) 0 var(--space-5)}h3{font-size:var(--text-3);margin:var(--space-6) 0 var(--space-4)}h4{font-size:var(--text-4);margin:var(--space-5) 0 var(--space-3)}h5{font-size:var(--text-5);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: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);--text-2: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);--text-3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);--text-4: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);--text-5: 1.125rem;--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),::file-selector-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}}}::file-selector-button{background-color:transparent;color:var(--foreground);border:1px solid var(--border)}::file-selector-button:hover{background-color:var(--accent)}}@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}[class*=offset-]{grid-column-start:auto}}}@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]{--bg-amount: 8%;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-theme=dark] &{--bg-amount: 20%}&[data-variant]{border:none}&[data-variant=error],&[data-variant=danger]{color:var(--danger);background-color:color-mix(in srgb,var(--danger) var(--bg-amount),transparent);& a{color:var(--danger)}}&[data-variant=success]{color:var(--success);background-color:color-mix(in srgb,var(--success) var(--bg-amount),transparent);& a{color:var(--success)}}&[data-variant=warning]{color:var(--warning);background-color:color-mix(in srgb,var(--warning) var(--bg-amount),transparent);& a{color:var(--warning)}}}}@layer components{.badge{--bg-amount: 12%;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);[data-theme=dark] &{--bg-amount: 40%}&.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) var(--bg-amount),transparent)}&.warning{color:var(--warning);background-color:color-mix(in srgb,var(--warning) var(--bg-amount),transparent)}&.danger{color:var(--danger);background-color:color-mix(in srgb,var(--danger) var(--bg-amount),transparent)}}}@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]{--topnav-offset: 0px;--topnav-scroll-offset: 0px;display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:100dvh;gap:var(--space-4);&:has(nav[data-topnav]){--topnav-offset: var(--topnav-height);--topnav-scroll-offset: calc(var(--topnav-height) + var(--space-6))}>main{min-width:0;margin-block-start:var(--topnav-offset);[id]{scroll-margin-block-start:var(--topnav-scroll-offset)}}>aside[data-sidebar]{position:sticky;top:var(--topnav-offset);z-index:1;height:calc(100dvh - var(--topnav-offset));align-self:start;background-color:var(--background);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;width:var(--sidebar-width);>:is(header,footer){flex-shrink:0;padding:var(--space-3)}>footer{margin-block-start:auto}>nav{flex:1;min-height:0;overflow-y:auto;padding:var(--space-3) var(--space-2);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);&:is(: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)}:is([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}[data-sidebar-layout=always] [data-sidebar-toggle]{display:inline-block}[data-sidebar-layout=always]{transition:grid-template-columns var(--transition);>aside[data-sidebar]{transform:translate(0);opacity:1;transition:transform var(--transition),opacity var(--transition),visibility var(--transition)}}[data-sidebar-layout=always][data-sidebar-open]{grid-template-columns:0px 1fr;gap:0;>aside[data-sidebar]{overflow:hidden;min-width:0;transform:translate(-100%);opacity:0;visibility:hidden;border-inline-end:none}}@media(max-width:768px){[data-sidebar-layout]{grid-template-columns:1fr;>aside[data-sidebar]{position:fixed;top:var(--topnav-offset);left:0;height:calc(100dvh - var(--topnav-offset));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-layout=always][data-sidebar-open]{grid-template-columns:1fr;gap:var(--space-4);>aside[data-sidebar]{opacity:1;visibility:visible;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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@knadh/oat",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "license": "MIT",
5
5
  "author": "Kailash Nadh",
6
6
  "homepage": "https://oat.ink",