@aortl/admin-css 0.5.2 → 0.7.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.
@@ -1,7 +1,5 @@
1
1
  /*! @aortl/admin-css scoped variant — @scope (._ao-admin-root); admin classes prefixed with _ao-. */
2
2
  /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
3
- @layer properties;
4
- @layer theme, base, components, utilities;
5
3
  @font-face {
6
4
  font-family: "IBM Plex Sans";
7
5
  font-style: normal;
@@ -50,6 +48,26 @@
50
48
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format("woff2");
51
49
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
52
50
  }
51
+ @property --tw-rotate-x {
52
+ syntax: "*";
53
+ inherits: false;
54
+ }
55
+ @property --tw-rotate-y {
56
+ syntax: "*";
57
+ inherits: false;
58
+ }
59
+ @property --tw-rotate-z {
60
+ syntax: "*";
61
+ inherits: false;
62
+ }
63
+ @property --tw-skew-x {
64
+ syntax: "*";
65
+ inherits: false;
66
+ }
67
+ @property --tw-skew-y {
68
+ syntax: "*";
69
+ inherits: false;
70
+ }
53
71
  @property --tw-ordinal {
54
72
  syntax: "*";
55
73
  inherits: false;
@@ -70,6 +88,28 @@
70
88
  syntax: "*";
71
89
  inherits: false;
72
90
  }
91
+ @property --tw-leading {
92
+ syntax: "*";
93
+ inherits: false;
94
+ }
95
+ @property --tw-font-weight {
96
+ syntax: "*";
97
+ inherits: false;
98
+ }
99
+ @property --tw-border-style {
100
+ syntax: "*";
101
+ inherits: false;
102
+ initial-value: solid;
103
+ }
104
+ @property --tw-outline-style {
105
+ syntax: "*";
106
+ inherits: false;
107
+ initial-value: solid;
108
+ }
109
+ @property --tw-duration {
110
+ syntax: "*";
111
+ inherits: false;
112
+ }
73
113
  @property --tw-shadow {
74
114
  syntax: "*";
75
115
  inherits: false;
@@ -135,28 +175,6 @@
135
175
  inherits: false;
136
176
  initial-value: 0 0 #0000;
137
177
  }
138
- @property --tw-leading {
139
- syntax: "*";
140
- inherits: false;
141
- }
142
- @property --tw-font-weight {
143
- syntax: "*";
144
- inherits: false;
145
- }
146
- @property --tw-border-style {
147
- syntax: "*";
148
- inherits: false;
149
- initial-value: solid;
150
- }
151
- @property --tw-outline-style {
152
- syntax: "*";
153
- inherits: false;
154
- initial-value: solid;
155
- }
156
- @property --tw-duration {
157
- syntax: "*";
158
- inherits: false;
159
- }
160
178
  @property --tw-translate-x {
161
179
  syntax: "*";
162
180
  inherits: false;
@@ -177,6 +195,24 @@
177
195
  inherits: false;
178
196
  }
179
197
  @scope (._ao-admin-root) {
198
+ :scope :where(
199
+ h1, h2, h3, h4, h5, h6,
200
+ p, a,
201
+ ul, ol, li, dl, dt, dd,
202
+ blockquote, pre, code,
203
+ button, input, textarea, select, label, fieldset, legend,
204
+ table, thead, tbody, tfoot, tr, th, td
205
+ ) {
206
+ font-family: inherit;
207
+ font-style: inherit;
208
+ font-variant: normal;
209
+ font-weight: inherit;
210
+ color: inherit;
211
+ letter-spacing: normal;
212
+ text-transform: none;
213
+ text-decoration: inherit;
214
+ line-height: inherit;
215
+ }
180
216
  :scope {
181
217
  color-scheme: light dark;
182
218
  }
@@ -188,11 +224,21 @@
188
224
  }
189
225
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
190
226
  :scope, :scope *, :scope::before, :scope ::before, :scope::after, :scope ::after, :scope::backdrop, :scope ::backdrop {
227
+ --tw-rotate-x: initial;
228
+ --tw-rotate-y: initial;
229
+ --tw-rotate-z: initial;
230
+ --tw-skew-x: initial;
231
+ --tw-skew-y: initial;
191
232
  --tw-ordinal: initial;
192
233
  --tw-slashed-zero: initial;
193
234
  --tw-numeric-figure: initial;
194
235
  --tw-numeric-spacing: initial;
195
236
  --tw-numeric-fraction: initial;
237
+ --tw-leading: initial;
238
+ --tw-font-weight: initial;
239
+ --tw-border-style: solid;
240
+ --tw-outline-style: solid;
241
+ --tw-duration: initial;
196
242
  --tw-shadow: 0 0 #0000;
197
243
  --tw-shadow-color: initial;
198
244
  --tw-shadow-alpha: 100%;
@@ -207,11 +253,6 @@
207
253
  --tw-ring-offset-width: 0px;
208
254
  --tw-ring-offset-color: #fff;
209
255
  --tw-ring-offset-shadow: 0 0 #0000;
210
- --tw-leading: initial;
211
- --tw-font-weight: initial;
212
- --tw-border-style: solid;
213
- --tw-outline-style: solid;
214
- --tw-duration: initial;
215
256
  --tw-translate-x: 0;
216
257
  --tw-translate-y: 0;
217
258
  --tw-translate-z: 0;
@@ -236,6 +277,7 @@
236
277
  --text-xl--line-height: calc(1.75 / 1.25);
237
278
  --font-weight-medium: 500;
238
279
  --font-weight-semibold: 600;
280
+ --font-weight-bold: 700;
239
281
  --tracking-wide: 0.025em;
240
282
  --leading-tight: 1.25;
241
283
  --leading-snug: 1.375;
@@ -1124,6 +1166,101 @@
1124
1166
  -webkit-user-select: none;
1125
1167
  user-select: none;
1126
1168
  }
1169
+ :scope._ao-property-list, :scope ._ao-property-list {
1170
+ display: flex;
1171
+ flex-direction: column;
1172
+ font-size: var(--text-sm);
1173
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1174
+ color: var(--color-text);
1175
+ }
1176
+ :scope._ao-property-list-title, :scope ._ao-property-list-title {
1177
+ margin-bottom: calc(var(--spacing) * 2);
1178
+ font-size: var(--text-sm);
1179
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1180
+ --tw-font-weight: var(--font-weight-bold);
1181
+ font-weight: var(--font-weight-bold);
1182
+ color: var(--color-text);
1183
+ }
1184
+ :scope._ao-property-list-items, :scope ._ao-property-list-items {
1185
+ display: grid;
1186
+ grid-template-columns: max-content 1fr;
1187
+ }
1188
+ :scope._ao-property-list-label, :scope ._ao-property-list-label, :scope._ao-property-list-value, :scope ._ao-property-list-value {
1189
+ display: flex;
1190
+ align-items: center;
1191
+ padding: 0.375rem 0.75rem;
1192
+ min-height: 2rem;
1193
+ }
1194
+ :scope._ao-property-list-label, :scope ._ao-property-list-label {
1195
+ color: var(--color-text-muted);
1196
+ }
1197
+ :scope._ao-property-list-value, :scope ._ao-property-list-value {
1198
+ gap: 0.5rem;
1199
+ min-width: 0;
1200
+ }
1201
+ :scope._ao-property-list-value-numeric, :scope ._ao-property-list-value-numeric {
1202
+ justify-content: flex-end;
1203
+ --tw-numeric-spacing: tabular-nums;
1204
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
1205
+ }
1206
+ :scope._ao-property-list-striped dt:nth-of-type(2n + 2), :scope ._ao-property-list-striped dt:nth-of-type(2n + 2), :scope._ao-property-list-striped dd:nth-of-type(2n + 2), :scope ._ao-property-list-striped dd:nth-of-type(2n + 2) {
1207
+ background-color: var(--color-surface-muted);
1208
+ }
1209
+ :scope._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))), :scope ._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))) {
1210
+ display: none;
1211
+ }
1212
+ :scope._ao-property-list-copy, :scope ._ao-property-list-copy {
1213
+ margin-left: auto;
1214
+ display: inline-flex;
1215
+ cursor: pointer;
1216
+ align-items: center;
1217
+ justify-content: center;
1218
+ border-radius: 0.25rem;
1219
+ border-style: var(--tw-border-style);
1220
+ border-width: 0px;
1221
+ background-color: transparent;
1222
+ color: var(--color-text-muted);
1223
+ &:hover {
1224
+ @media (hover: hover) {
1225
+ color: var(--color-text);
1226
+ }
1227
+ }
1228
+ &:focus-visible {
1229
+ outline-style: var(--tw-outline-style);
1230
+ outline-width: 2px;
1231
+ }
1232
+ &:focus-visible {
1233
+ outline-offset: 2px;
1234
+ }
1235
+ &:focus-visible {
1236
+ outline-color: var(--color-primary);
1237
+ }
1238
+ display: none;
1239
+ flex-shrink: 0;
1240
+ padding: 0.125rem;
1241
+ transition: opacity 100ms ease, color 100ms ease;
1242
+ }
1243
+ :scope._ao-property-list-copyable ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-copy, :scope._ao-property-list-value-copyable ._ao-property-list-copy, :scope ._ao-property-list-value-copyable ._ao-property-list-copy {
1244
+ display: inline-flex;
1245
+ opacity: 0;
1246
+ pointer-events: none;
1247
+ }
1248
+ :scope._ao-property-list-copyable ._ao-property-list-label:hover + ._ao-property-list-value ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-label:hover + ._ao-property-list-value ._ao-property-list-copy, :scope._ao-property-list-copyable ._ao-property-list-value:hover ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-value:hover ._ao-property-list-copy, :scope._ao-property-list-label:has(+ ._ao-property-list-value-copyable):hover + ._ao-property-list-value ._ao-property-list-copy, :scope ._ao-property-list-label:has(+ ._ao-property-list-value-copyable):hover + ._ao-property-list-value ._ao-property-list-copy, :scope._ao-property-list-value-copyable:hover ._ao-property-list-copy, :scope ._ao-property-list-value-copyable:hover ._ao-property-list-copy, :scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible, :scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied] {
1249
+ opacity: 1;
1250
+ pointer-events: auto;
1251
+ }
1252
+ :scope._ao-property-list-copy ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy ._ao-property-list-copy-icon-copied {
1253
+ display: none;
1254
+ }
1255
+ :scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon {
1256
+ display: none;
1257
+ }
1258
+ :scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied {
1259
+ display: inline-flex;
1260
+ }
1261
+ :scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied] {
1262
+ color: var(--color-success);
1263
+ }
1127
1264
  :scope._ao-btn, :scope ._ao-btn {
1128
1265
  display: inline-flex;
1129
1266
  cursor: pointer;
@@ -1997,6 +2134,18 @@
1997
2134
  --tw-font-weight: var(--font-weight-semibold);
1998
2135
  font-weight: var(--font-weight-semibold);
1999
2136
  }
2137
+ :scope._ao-card-header, :scope ._ao-card-header {
2138
+ display: flex;
2139
+ align-items: center;
2140
+ gap: calc(var(--spacing) * 2);
2141
+ }
2142
+ :scope._ao-card-toolbar, :scope ._ao-card-toolbar {
2143
+ margin-top: calc(var(--spacing) * -0.5);
2144
+ margin-left: auto;
2145
+ display: flex;
2146
+ align-items: center;
2147
+ gap: calc(var(--spacing) * 1);
2148
+ }
2000
2149
  :scope._ao-card-description, :scope ._ao-card-description {
2001
2150
  font-size: var(--text-sm);
2002
2151
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -3446,9 +3595,6 @@
3446
3595
  :scope._ao-block, :scope ._ao-block {
3447
3596
  display: block;
3448
3597
  }
3449
- :scope._ao-contents, :scope ._ao-contents {
3450
- display: contents;
3451
- }
3452
3598
  :scope._ao-grid, :scope ._ao-grid {
3453
3599
  display: grid;
3454
3600
  }
@@ -3464,6 +3610,9 @@
3464
3610
  :scope._ao-flex-1, :scope ._ao-flex-1 {
3465
3611
  flex: 1;
3466
3612
  }
3613
+ :scope._ao-transform, :scope ._ao-transform {
3614
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
3615
+ }
3467
3616
  :scope._ao-text-right, :scope ._ao-text-right {
3468
3617
  text-align: right;
3469
3618
  }
@@ -3471,10 +3620,6 @@
3471
3620
  --tw-numeric-spacing: tabular-nums;
3472
3621
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
3473
3622
  }
3474
- :scope._ao-shadow, :scope ._ao-shadow {
3475
- --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3476
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3477
- }
3478
3623
  :scope._ao-select-all, :scope ._ao-select-all {
3479
3624
  -webkit-user-select: all;
3480
3625
  user-select: all;
@@ -6,11 +6,21 @@
6
6
  @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:optional;src:url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
7
7
  @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:optional;src:url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwl5FgtIU.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
8
8
  @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:optional;src:url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
9
+ @property --tw-rotate-x{syntax:"*";inherits:false}
10
+ @property --tw-rotate-y{syntax:"*";inherits:false}
11
+ @property --tw-rotate-z{syntax:"*";inherits:false}
12
+ @property --tw-skew-x{syntax:"*";inherits:false}
13
+ @property --tw-skew-y{syntax:"*";inherits:false}
9
14
  @property --tw-ordinal{syntax:"*";inherits:false}
10
15
  @property --tw-slashed-zero{syntax:"*";inherits:false}
11
16
  @property --tw-numeric-figure{syntax:"*";inherits:false}
12
17
  @property --tw-numeric-spacing{syntax:"*";inherits:false}
13
18
  @property --tw-numeric-fraction{syntax:"*";inherits:false}
19
+ @property --tw-leading{syntax:"*";inherits:false}
20
+ @property --tw-font-weight{syntax:"*";inherits:false}
21
+ @property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
22
+ @property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
23
+ @property --tw-duration{syntax:"*";inherits:false}
14
24
  @property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
15
25
  @property --tw-shadow-color{syntax:"*";inherits:false}
16
26
  @property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}
@@ -25,21 +35,34 @@
25
35
  @property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}
26
36
  @property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}
27
37
  @property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
28
- @property --tw-leading{syntax:"*";inherits:false}
29
- @property --tw-font-weight{syntax:"*";inherits:false}
30
- @property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
31
- @property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
32
- @property --tw-duration{syntax:"*";inherits:false}
33
38
  @property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}
34
39
  @property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}
35
40
  @property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}
36
41
  @property --tw-tracking{syntax:"*";inherits:false}
37
42
  @scope (._ao-admin-root) {
43
+ :scope :where(
44
+ h1, h2, h3, h4, h5, h6,
45
+ p, a,
46
+ ul, ol, li, dl, dt, dd,
47
+ blockquote, pre, code,
48
+ button, input, textarea, select, label, fieldset, legend,
49
+ table, thead, tbody, tfoot, tr, th, td
50
+ ) {
51
+ font-family: inherit;
52
+ font-style: inherit;
53
+ font-variant: normal;
54
+ font-weight: inherit;
55
+ color: inherit;
56
+ letter-spacing: normal;
57
+ text-transform: none;
58
+ text-decoration: inherit;
59
+ line-height: inherit;
60
+ }
38
61
  :scope{color-scheme:light dark}
39
62
  :scope[data-theme=dark], :scope [data-theme=dark]{color-scheme:dark}
40
63
  :scope[data-theme=light], :scope [data-theme=light]{color-scheme:light}
41
- @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){:scope, :scope *, :scope:before, :scope :before, :scope:after, :scope :after, :scope::backdrop, :scope ::backdrop{--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-leading:initial;--tw-font-weight:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-duration:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-tracking:initial}}
42
- :scope, :scope:host, :scope :host{--font-sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--spacing:.25rem;--container-xs:20rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-paper:#fffcf0;--color-black:#100f0f;--color-base-50:#f2f0e5;--color-base-100:#e6e4d9;--color-base-150:#dad8ce;--color-base-200:#cecdc3;--color-base-300:#b7b5ac;--color-base-400:#9f9d96;--color-base-500:#878580;--color-base-600:#6f6e69;--color-base-700:#575653;--color-base-800:#403e3c;--color-base-850:#343331;--color-base-900:#282726;--color-base-950:#1c1b1a;--color-red-50:#ffe1d5;--color-red-100:#ffcabb;--color-red-150:#fdb2a2;--color-red-200:#f89a8a;--color-red-300:#e8705f;--color-red-400:#d14d41;--color-red-500:#c03e35;--color-red-600:#af3029;--color-red-700:#942822;--color-red-800:#6c201c;--color-red-850:#551b18;--color-red-900:#3e1715;--color-red-950:#261312;--color-orange-50:#ffe7ce;--color-orange-100:#fed3af;--color-orange-150:#fcc192;--color-orange-200:#f9ae77;--color-orange-300:#ec8b49;--color-orange-400:#da702c;--color-orange-500:#cb6120;--color-orange-600:#bc5215;--color-orange-700:#9d4310;--color-orange-800:#71320d;--color-orange-850:#59290d;--color-orange-900:#40200d;--color-orange-950:#27180e;--color-yellow-50:#faeec6;--color-yellow-100:#f6e2a0;--color-yellow-150:#f1d67e;--color-yellow-200:#eccb60;--color-yellow-300:#dfb431;--color-yellow-400:#d0a215;--color-yellow-500:#be9207;--color-yellow-600:#ad8301;--color-yellow-700:#8e6b01;--color-yellow-800:#664d01;--color-yellow-850:#503d02;--color-yellow-900:#3a2d04;--color-yellow-950:#241e08;--color-green-50:#edeecf;--color-green-100:#dde2b2;--color-green-150:#cdd597;--color-green-200:#bec97e;--color-green-300:#a0af54;--color-green-400:#879a39;--color-green-500:#768d21;--color-green-600:#66800b;--color-green-700:#536907;--color-green-800:#3d4c07;--color-green-850:#313d07;--color-green-900:#252d09;--color-green-950:#1a1e0c;--color-cyan-50:#ddf1e4;--color-cyan-100:#bfe8d9;--color-cyan-150:#a2dece;--color-cyan-200:#87d3c3;--color-cyan-300:#5abdac;--color-cyan-400:#3aa99f;--color-cyan-500:#2f968d;--color-cyan-600:#24837b;--color-cyan-700:#1c6c66;--color-cyan-800:#164f4a;--color-cyan-850:#143f3c;--color-cyan-900:#122f2c;--color-cyan-950:#101f1d;--color-blue-50:#e1eceb;--color-blue-100:#c6dde8;--color-blue-150:#abcfe2;--color-blue-200:#92bfdb;--color-blue-300:#66a0c8;--color-blue-400:#4385be;--color-blue-500:#3171b2;--color-blue-600:#205ea6;--color-blue-700:#1a4f8c;--color-blue-800:#163b66;--color-blue-850:#133051;--color-blue-900:#12253b;--color-blue-950:#101a24;--color-purple-50:#f0eaec;--color-purple-100:#e2d9e9;--color-purple-150:#d3cae6;--color-purple-200:#c4b9e0;--color-purple-300:#a699d0;--color-purple-400:#8b7ec8;--color-purple-500:#735eb5;--color-purple-600:#5e409d;--color-purple-700:#4f3685;--color-purple-800:#3c2a62;--color-purple-850:#31234e;--color-purple-900:#261c39;--color-purple-950:#1a1623;--color-magenta-50:#fee4e5;--color-magenta-100:#fccfda;--color-magenta-150:#f9b9cf;--color-magenta-200:#f4a4c2;--color-magenta-300:#e47da8;--color-magenta-400:#ce5d97;--color-magenta-500:#b74583;--color-magenta-600:#a02f6f;--color-magenta-700:#87285e;--color-magenta-800:#641f46;--color-magenta-850:#4f1b39;--color-magenta-900:#39172b;--color-magenta-950:#24131d;--color-surface:light-dark(var(--color-paper),var(--color-black));--color-surface-muted:light-dark(var(--color-base-50),var(--color-base-950));--color-surface-strong:light-dark(var(--color-base-100),var(--color-base-900));--color-text:light-dark(var(--color-black),var(--color-base-200));--color-text-muted:light-dark(var(--color-base-600),var(--color-base-500));--color-border:light-dark(var(--color-base-150),var(--color-base-850));--color-border-strong:light-dark(var(--color-base-300),var(--color-base-700));--color-primary:light-dark(var(--color-blue-600),var(--color-blue-400));--color-primary-hover:light-dark(var(--color-blue-700),var(--color-blue-300));--color-primary-muted:light-dark(var(--color-blue-50),var(--color-blue-950));--color-primary-content:light-dark(var(--color-paper),var(--color-black));--color-system-accent:light-dark(var(--color-base-600),var(--color-base-400));--color-system-accent-hover:color-mix(in oklch, light-dark(var(--color-base-600),var(--color-base-400)), light-dark(var(--color-black),var(--color-base-200)) 12%)}
64
+ @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){:scope, :scope *, :scope:before, :scope :before, :scope:after, :scope :after, :scope::backdrop, :scope ::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-leading:initial;--tw-font-weight:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-duration:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-tracking:initial}}
65
+ :scope, :scope:host, :scope :host{--font-sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--spacing:.25rem;--container-xs:20rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-paper:#fffcf0;--color-black:#100f0f;--color-base-50:#f2f0e5;--color-base-100:#e6e4d9;--color-base-150:#dad8ce;--color-base-200:#cecdc3;--color-base-300:#b7b5ac;--color-base-400:#9f9d96;--color-base-500:#878580;--color-base-600:#6f6e69;--color-base-700:#575653;--color-base-800:#403e3c;--color-base-850:#343331;--color-base-900:#282726;--color-base-950:#1c1b1a;--color-red-50:#ffe1d5;--color-red-100:#ffcabb;--color-red-150:#fdb2a2;--color-red-200:#f89a8a;--color-red-300:#e8705f;--color-red-400:#d14d41;--color-red-500:#c03e35;--color-red-600:#af3029;--color-red-700:#942822;--color-red-800:#6c201c;--color-red-850:#551b18;--color-red-900:#3e1715;--color-red-950:#261312;--color-orange-50:#ffe7ce;--color-orange-100:#fed3af;--color-orange-150:#fcc192;--color-orange-200:#f9ae77;--color-orange-300:#ec8b49;--color-orange-400:#da702c;--color-orange-500:#cb6120;--color-orange-600:#bc5215;--color-orange-700:#9d4310;--color-orange-800:#71320d;--color-orange-850:#59290d;--color-orange-900:#40200d;--color-orange-950:#27180e;--color-yellow-50:#faeec6;--color-yellow-100:#f6e2a0;--color-yellow-150:#f1d67e;--color-yellow-200:#eccb60;--color-yellow-300:#dfb431;--color-yellow-400:#d0a215;--color-yellow-500:#be9207;--color-yellow-600:#ad8301;--color-yellow-700:#8e6b01;--color-yellow-800:#664d01;--color-yellow-850:#503d02;--color-yellow-900:#3a2d04;--color-yellow-950:#241e08;--color-green-50:#edeecf;--color-green-100:#dde2b2;--color-green-150:#cdd597;--color-green-200:#bec97e;--color-green-300:#a0af54;--color-green-400:#879a39;--color-green-500:#768d21;--color-green-600:#66800b;--color-green-700:#536907;--color-green-800:#3d4c07;--color-green-850:#313d07;--color-green-900:#252d09;--color-green-950:#1a1e0c;--color-cyan-50:#ddf1e4;--color-cyan-100:#bfe8d9;--color-cyan-150:#a2dece;--color-cyan-200:#87d3c3;--color-cyan-300:#5abdac;--color-cyan-400:#3aa99f;--color-cyan-500:#2f968d;--color-cyan-600:#24837b;--color-cyan-700:#1c6c66;--color-cyan-800:#164f4a;--color-cyan-850:#143f3c;--color-cyan-900:#122f2c;--color-cyan-950:#101f1d;--color-blue-50:#e1eceb;--color-blue-100:#c6dde8;--color-blue-150:#abcfe2;--color-blue-200:#92bfdb;--color-blue-300:#66a0c8;--color-blue-400:#4385be;--color-blue-500:#3171b2;--color-blue-600:#205ea6;--color-blue-700:#1a4f8c;--color-blue-800:#163b66;--color-blue-850:#133051;--color-blue-900:#12253b;--color-blue-950:#101a24;--color-purple-50:#f0eaec;--color-purple-100:#e2d9e9;--color-purple-150:#d3cae6;--color-purple-200:#c4b9e0;--color-purple-300:#a699d0;--color-purple-400:#8b7ec8;--color-purple-500:#735eb5;--color-purple-600:#5e409d;--color-purple-700:#4f3685;--color-purple-800:#3c2a62;--color-purple-850:#31234e;--color-purple-900:#261c39;--color-purple-950:#1a1623;--color-magenta-50:#fee4e5;--color-magenta-100:#fccfda;--color-magenta-150:#f9b9cf;--color-magenta-200:#f4a4c2;--color-magenta-300:#e47da8;--color-magenta-400:#ce5d97;--color-magenta-500:#b74583;--color-magenta-600:#a02f6f;--color-magenta-700:#87285e;--color-magenta-800:#641f46;--color-magenta-850:#4f1b39;--color-magenta-900:#39172b;--color-magenta-950:#24131d;--color-surface:light-dark(var(--color-paper),var(--color-black));--color-surface-muted:light-dark(var(--color-base-50),var(--color-base-950));--color-surface-strong:light-dark(var(--color-base-100),var(--color-base-900));--color-text:light-dark(var(--color-black),var(--color-base-200));--color-text-muted:light-dark(var(--color-base-600),var(--color-base-500));--color-border:light-dark(var(--color-base-150),var(--color-base-850));--color-border-strong:light-dark(var(--color-base-300),var(--color-base-700));--color-primary:light-dark(var(--color-blue-600),var(--color-blue-400));--color-primary-hover:light-dark(var(--color-blue-700),var(--color-blue-300));--color-primary-muted:light-dark(var(--color-blue-50),var(--color-blue-950));--color-primary-content:light-dark(var(--color-paper),var(--color-black));--color-system-accent:light-dark(var(--color-base-600),var(--color-base-400));--color-system-accent-hover:color-mix(in oklch, light-dark(var(--color-base-600),var(--color-base-400)), light-dark(var(--color-black),var(--color-base-200)) 12%)}
43
66
  @supports (color:color-mix(in lab, red, red)){:scope, :scope:host, :scope :host{--color-system-accent-hover:color-mix(in oklch, var(--color-system-accent), var(--color-text) 12%)}}
44
67
  :scope, :scope:host, :scope :host{--color-system-accent-muted:color-mix(in oklch, light-dark(var(--color-base-600),var(--color-base-400)) 12%, light-dark(var(--color-paper),var(--color-black)))}
45
68
  @supports (color:color-mix(in lab, red, red)){:scope, :scope:host, :scope :host{--color-system-accent-muted:color-mix(in oklch, var(--color-system-accent) 12%, var(--color-surface))}}
@@ -187,6 +210,24 @@
187
210
  :scope._ao-page-link._ao-active, :scope ._ao-page-link._ao-active, :scope._ao-page-link[aria-current=page], :scope ._ao-page-link[aria-current=page]{border-color:var(--color-primary-muted);background-color:var(--color-primary-muted);color:var(--color-primary)}
188
211
  :scope._ao-page-link[aria-disabled=true], :scope ._ao-page-link[aria-disabled=true]{pointer-events:none;cursor:not-allowed;opacity:.5}
189
212
  :scope._ao-page-ellipsis, :scope ._ao-page-ellipsis{height:calc(var(--spacing) * 8);min-width:calc(var(--spacing) * 8);padding-inline:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:inline-flex}
213
+ :scope._ao-property-list, :scope ._ao-property-list{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);flex-direction:column;display:flex}
214
+ :scope._ao-property-list-title, :scope ._ao-property-list-title{margin-bottom:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-text)}
215
+ :scope._ao-property-list-items, :scope ._ao-property-list-items{grid-template-columns:max-content 1fr;display:grid}
216
+ :scope._ao-property-list-label, :scope ._ao-property-list-label, :scope._ao-property-list-value, :scope ._ao-property-list-value{align-items:center;min-height:2rem;padding:.375rem .75rem;display:flex}
217
+ :scope._ao-property-list-label, :scope ._ao-property-list-label{color:var(--color-text-muted)}
218
+ :scope._ao-property-list-value, :scope ._ao-property-list-value{gap:.5rem;min-width:0}
219
+ :scope._ao-property-list-value-numeric, :scope ._ao-property-list-value-numeric{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);justify-content:flex-end}
220
+ :scope._ao-property-list-striped dt:nth-of-type(2n+2), :scope ._ao-property-list-striped dt:nth-of-type(2n+2), :scope._ao-property-list-striped dd:nth-of-type(2n+2), :scope ._ao-property-list-striped dd:nth-of-type(2n+2){background-color:var(--color-surface-muted)}
221
+ :scope._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))), :scope ._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))){display:none}
222
+ :scope._ao-property-list-copy, :scope ._ao-property-list-copy{cursor:pointer;border-style:var(--tw-border-style);color:var(--color-text-muted);background-color:#0000;border-width:0;border-radius:.25rem;justify-content:center;align-items:center;margin-left:auto;display:inline-flex}
223
+ @media (hover:hover){:scope._ao-property-list-copy:hover, :scope ._ao-property-list-copy:hover{color:var(--color-text)}}
224
+ :scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-primary)}
225
+ :scope._ao-property-list-copy, :scope ._ao-property-list-copy{flex-shrink:0;padding:.125rem;transition:opacity .1s,color .1s;display:none}
226
+ :scope._ao-property-list-copyable ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-copy, :scope._ao-property-list-value-copyable ._ao-property-list-copy, :scope ._ao-property-list-value-copyable ._ao-property-list-copy{opacity:0;pointer-events:none;display:inline-flex}
227
+ :scope._ao-property-list-copyable ._ao-property-list-label:hover+._ao-property-list-value ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-label:hover+._ao-property-list-value ._ao-property-list-copy, :scope._ao-property-list-copyable ._ao-property-list-value:hover ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-value:hover ._ao-property-list-copy, :scope._ao-property-list-label:has(+._ao-property-list-value-copyable):hover+._ao-property-list-value ._ao-property-list-copy, :scope ._ao-property-list-label:has(+._ao-property-list-value-copyable):hover+._ao-property-list-value ._ao-property-list-copy, :scope._ao-property-list-value-copyable:hover ._ao-property-list-copy, :scope ._ao-property-list-value-copyable:hover ._ao-property-list-copy, :scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible, :scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied]{opacity:1;pointer-events:auto}
228
+ :scope._ao-property-list-copy ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy ._ao-property-list-copy-icon-copied, :scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon{display:none}
229
+ :scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied{display:inline-flex}
230
+ :scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied]{color:var(--color-success)}
190
231
  :scope._ao-btn, :scope ._ao-btn{cursor:pointer;justify-content:center;align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-lg);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-medium);line-height:1;font-weight:var(--font-weight-medium);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;-webkit-user-select:none;user-select:none;border-width:1px;border-color:#0000;transition-duration:.15s;display:inline-flex}
191
232
  :scope._ao-btn:focus-visible, :scope ._ao-btn:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-primary)}
192
233
  :scope._ao-btn:disabled, :scope ._ao-btn:disabled{pointer-events:none;cursor:not-allowed;opacity:.5}
@@ -330,6 +371,8 @@
330
371
  :scope._ao-card, :scope ._ao-card{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);color:var(--color-text);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);flex-direction:column;display:flex;overflow:hidden}
331
372
  :scope._ao-card-body, :scope ._ao-card-body{gap:calc(var(--spacing) * 3);padding:calc(var(--spacing) * 5);flex-direction:column;display:flex}
332
373
  :scope._ao-card-title, :scope ._ao-card-title{align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);display:flex}
374
+ :scope._ao-card-header, :scope ._ao-card-header{align-items:center;gap:calc(var(--spacing) * 2);display:flex}
375
+ :scope._ao-card-toolbar, :scope ._ao-card-toolbar{margin-top:calc(var(--spacing) * -.5);align-items:center;gap:calc(var(--spacing) * 1);margin-left:auto;display:flex}
333
376
  :scope._ao-card-description, :scope ._ao-card-description{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted)}
334
377
  :scope._ao-card-actions, :scope ._ao-card-actions{align-items:center;gap:calc(var(--spacing) * 2);padding-top:calc(var(--spacing) * 2);flex-wrap:wrap;margin-top:auto;display:flex}
335
378
  :scope._ao-card-compact ._ao-card-body, :scope ._ao-card-compact ._ao-card-body{gap:calc(var(--spacing) * 2);padding:calc(var(--spacing) * 3)}
@@ -543,14 +586,13 @@
543
586
  @media (min-width:80rem){:scope._ao-container, :scope ._ao-container{max-width:80rem}}
544
587
  @media (min-width:96rem){:scope._ao-container, :scope ._ao-container{max-width:96rem}}
545
588
  :scope._ao-block, :scope ._ao-block{display:block}
546
- :scope._ao-contents, :scope ._ao-contents{display:contents}
547
589
  :scope._ao-grid, :scope ._ao-grid{display:grid}
548
590
  :scope._ao-hidden, :scope ._ao-hidden{display:none}
549
591
  :scope._ao-table, :scope ._ao-table{display:table}
550
592
  :scope._ao-table-cell, :scope ._ao-table-cell{display:table-cell}
551
593
  :scope._ao-flex-1, :scope ._ao-flex-1{flex:1}
594
+ :scope._ao-transform, :scope ._ao-transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}
552
595
  :scope._ao-text-right, :scope ._ao-text-right{text-align:right}
553
596
  :scope._ao-tabular-nums, :scope ._ao-tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}
554
- :scope._ao-shadow, :scope ._ao-shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
555
597
  :scope._ao-select-all, :scope ._ao-select-all{-webkit-user-select:all;user-select:all}
556
598
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aortl/admin-css",
3
- "version": "0.5.2",
3
+ "version": "0.7.0",
4
4
  "description": "Pre-built CSS design system. Drop in via <link> and use semantic class names.",
5
5
  "keywords": [
6
6
  "components",
@@ -42,13 +42,16 @@
42
42
  "@tailwindcss/cli": "4.3.0",
43
43
  "postcss": "8.5.15",
44
44
  "postcss-selector-parser": "6.1.2",
45
- "tailwindcss": "4.3.0"
45
+ "tailwindcss": "4.3.0",
46
+ "vitest": "4.1.6"
46
47
  },
47
48
  "scripts": {
48
49
  "build": "pnpm build:dev && pnpm build:min && pnpm build:scoped",
49
50
  "build:dev": "tailwindcss -i ./src/admin.css -o ./dist/admin.css",
50
51
  "build:min": "tailwindcss -i ./src/admin.css -o ./dist/admin.min.css --minify",
51
52
  "build:scoped": "node ./scripts/wrap-scoped.mjs",
52
- "dev": "tailwindcss -i ./src/admin.css -o ./dist/admin.css --watch"
53
+ "dev": "tailwindcss -i ./src/admin.css -o ./dist/admin.css --watch",
54
+ "test": "vitest run",
55
+ "test:watch": "vitest"
53
56
  }
54
57
  }
@@ -16,6 +16,19 @@
16
16
  @apply flex items-center gap-2 text-lg font-semibold leading-tight;
17
17
  }
18
18
 
19
+ /* Header row: title on the left, toolbar pushed to the trailing edge. */
20
+ .card-header {
21
+ @apply flex items-center gap-2;
22
+ }
23
+
24
+ /* Trailing cluster of header controls (close, edit, …). The title's bold,
25
+ descender-less type sits visually high in its line box, so geometric
26
+ centering reads slightly low — nudge the controls up to the optical centre.
27
+ `card-title` is always `text-lg`, so this offset is constant. */
28
+ .card-toolbar {
29
+ @apply flex items-center gap-1 ml-auto -mt-0.5;
30
+ }
31
+
19
32
  .card-description {
20
33
  @apply text-sm text-text-muted;
21
34
  }
@@ -7,6 +7,7 @@
7
7
  @import "./progress.css";
8
8
  @import "./breadcrumbs.css";
9
9
  @import "./pagination.css";
10
+ @import "./property-list.css";
10
11
  @import "./button.css";
11
12
  @import "./button-group.css";
12
13
  @import "./input.css";
@@ -0,0 +1,103 @@
1
+ @layer components {
2
+ /* Outer section — owns striped, copyable, hide-if-empty modifiers. Title
3
+ (optional) and the items grid stack vertically. */
4
+ .property-list {
5
+ @apply flex flex-col text-sm text-text;
6
+ }
7
+
8
+ .property-list-title {
9
+ @apply text-sm font-bold text-text mb-2;
10
+ }
11
+
12
+ /* The <dl> itself is the two-track grid; <dt> auto-flows into column 1
13
+ and <dd> into column 2. */
14
+ .property-list-items {
15
+ display: grid;
16
+ grid-template-columns: max-content 1fr;
17
+ }
18
+
19
+ .property-list-label,
20
+ .property-list-value {
21
+ display: flex;
22
+ align-items: center;
23
+ padding: 0.375rem 0.75rem;
24
+ min-height: 2rem;
25
+ }
26
+
27
+ .property-list-label {
28
+ @apply text-text-muted;
29
+ }
30
+
31
+ .property-list-value {
32
+ gap: 0.5rem;
33
+ min-width: 0;
34
+ }
35
+
36
+ /* Numeric — right-align + tabular-nums on the value. */
37
+ .property-list-value-numeric {
38
+ justify-content: flex-end;
39
+ @apply tabular-nums;
40
+ }
41
+
42
+ /* Striped — band every second row (matching <dt> + <dd> pair). */
43
+ .property-list-striped dt:nth-of-type(2n + 2),
44
+ .property-list-striped dd:nth-of-type(2n + 2) {
45
+ @apply bg-surface-muted;
46
+ }
47
+
48
+ /* Collapse the section when every value rendered the auto em-dash. */
49
+ .property-list-hide-if-empty:not(:has(.property-list-value:not(.property-list-value-empty))) {
50
+ display: none;
51
+ }
52
+
53
+ /* Copy button — always emitted by the Value but kept out of layout entirely
54
+ unless copyable is active on the list or on this specific value. */
55
+ .property-list-copy {
56
+ @apply inline-flex items-center justify-center
57
+ ml-auto rounded
58
+ cursor-pointer border-0 bg-transparent
59
+ text-text-muted hover:text-text
60
+ focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
61
+ display: none;
62
+ flex-shrink: 0;
63
+ padding: 0.125rem;
64
+ transition:
65
+ opacity 100ms ease,
66
+ color 100ms ease;
67
+ }
68
+
69
+ .property-list-copyable .property-list-copy,
70
+ .property-list-value-copyable .property-list-copy {
71
+ display: inline-flex;
72
+ opacity: 0;
73
+ pointer-events: none;
74
+ }
75
+
76
+ /* Reveal on hover of either the label or the value of a copyable row, on
77
+ button focus, or while feedback is active. */
78
+ .property-list-copyable .property-list-label:hover + .property-list-value .property-list-copy,
79
+ .property-list-copyable .property-list-value:hover .property-list-copy,
80
+ .property-list-label:has(+ .property-list-value-copyable):hover
81
+ + .property-list-value
82
+ .property-list-copy,
83
+ .property-list-value-copyable:hover .property-list-copy,
84
+ .property-list-copy:focus-visible,
85
+ .property-list-copy[data-copied] {
86
+ opacity: 1;
87
+ pointer-events: auto;
88
+ }
89
+
90
+ /* Icon swap: copy → check while data-copied is set. */
91
+ .property-list-copy .property-list-copy-icon-copied {
92
+ display: none;
93
+ }
94
+ .property-list-copy[data-copied] .property-list-copy-icon {
95
+ display: none;
96
+ }
97
+ .property-list-copy[data-copied] .property-list-copy-icon-copied {
98
+ display: inline-flex;
99
+ }
100
+ .property-list-copy[data-copied] {
101
+ @apply text-success;
102
+ }
103
+ }