Mercurial

comparison design_system/src/styles/elements.css @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
1 :where(
2 zen-accordion,
3 zen-alert-dialog,
4 zen-aspect-ratio,
5 zen-attachment,
6 zen-avatar,
7 zen-badge,
8 zen-breadcrumb,
9 zen-bubble,
10 zen-box,
11 zen-button-group,
12 zen-calendar,
13 zen-carousel,
14 zen-chart,
15 zen-checkbox,
16 zen-collapsible,
17 zen-combobox,
18 zen-command,
19 zen-context-menu,
20 zen-data-table,
21 zen-date-picker,
22 zen-dialog,
23 zen-direction,
24 zen-drawer,
25 zen-dropdown-menu,
26 zen-empty,
27 zen-form,
28 zen-hover-card,
29 zen-heading,
30 zen-icon,
31 zen-input,
32 zen-input-group,
33 zen-input-otp,
34 zen-item,
35 zen-kbd,
36 zen-label,
37 zen-marker,
38 zen-menubar,
39 zen-message,
40 zen-message-scroller,
41 zen-native-select,
42 zen-navigation-menu,
43 zen-pagination,
44 zen-popover,
45 zen-progress,
46 zen-radio-group,
47 zen-resizable,
48 zen-scroll-area,
49 zen-select,
50 zen-separator,
51 zen-sheet,
52 zen-sidebar,
53 zen-skeleton,
54 zen-slider,
55 zen-spinner,
56 zen-switch,
57 zen-table,
58 zen-text,
59 zen-tabs,
60 zen-textarea,
61 zen-toggle,
62 zen-toggle-group,
63 zen-tooltip,
64 zen-typography
65 ) {
66 box-sizing: border-box;
67 color: var(--zenbu-sys-color-text-primary);
68 font-family: var(--zenbu-sys-font-family-ui);
69 }
70
71 :where(
72 zen-button,
73 zen-calendar,
74 zen-checkbox,
75 zen-combobox,
76 zen-command,
77 zen-date-picker,
78 zen-field,
79 zen-form,
80 zen-input,
81 zen-input-group,
82 zen-input-otp,
83 zen-native-select,
84 zen-radio-group,
85 zen-select,
86 zen-slider,
87 zen-switch,
88 zen-textarea
89 ) {
90 --zenbu-control-height: var(--zenbu-sys-control-height-md);
91 --zenbu-control-padding-block: var(--zenbu-sys-control-padding-block-md);
92 --zenbu-control-padding-inline: var(--zenbu-sys-control-padding-inline-md);
93 --zenbu-control-gap: var(--zenbu-sys-control-gap-md);
94 --zenbu-control-font-size: var(--zenbu-sys-font-size-md);
95 --zenbu-control-line-height: var(--zenbu-sys-control-line-height-md);
96 --zenbu-control-icon-size: var(--zenbu-sys-icon-size-md);
97 }
98
99 :where(
100 zen-button,
101 zen-calendar,
102 zen-checkbox,
103 zen-combobox,
104 zen-command,
105 zen-date-picker,
106 zen-field,
107 zen-form,
108 zen-input,
109 zen-input-group,
110 zen-input-otp,
111 zen-native-select,
112 zen-radio-group,
113 zen-select,
114 zen-slider,
115 zen-switch,
116 zen-textarea
117 )[size="xs"] {
118 --zenbu-control-height: var(--zenbu-sys-control-height-xs);
119 --zenbu-control-padding-block: var(--zenbu-sys-control-padding-block-xs);
120 --zenbu-control-padding-inline: var(--zenbu-sys-control-padding-inline-xs);
121 --zenbu-control-gap: var(--zenbu-sys-control-gap-xs);
122 --zenbu-control-font-size: var(--zenbu-sys-font-size-xs);
123 --zenbu-control-line-height: var(--zenbu-sys-control-line-height-xs);
124 --zenbu-control-icon-size: var(--zenbu-sys-icon-size-xs);
125 }
126
127 :where(
128 zen-button,
129 zen-calendar,
130 zen-checkbox,
131 zen-combobox,
132 zen-command,
133 zen-date-picker,
134 zen-field,
135 zen-form,
136 zen-input,
137 zen-input-group,
138 zen-input-otp,
139 zen-native-select,
140 zen-radio-group,
141 zen-select,
142 zen-slider,
143 zen-switch,
144 zen-textarea
145 )[size="sm"] {
146 --zenbu-control-height: var(--zenbu-sys-control-height-sm);
147 --zenbu-control-padding-block: var(--zenbu-sys-control-padding-block-sm);
148 --zenbu-control-padding-inline: var(--zenbu-sys-control-padding-inline-sm);
149 --zenbu-control-gap: var(--zenbu-sys-control-gap-sm);
150 --zenbu-control-font-size: var(--zenbu-sys-font-size-sm);
151 --zenbu-control-line-height: var(--zenbu-sys-control-line-height-sm);
152 --zenbu-control-icon-size: var(--zenbu-sys-icon-size-sm);
153 }
154
155 :where(
156 zen-button,
157 zen-calendar,
158 zen-checkbox,
159 zen-combobox,
160 zen-command,
161 zen-date-picker,
162 zen-field,
163 zen-form,
164 zen-input,
165 zen-input-group,
166 zen-input-otp,
167 zen-native-select,
168 zen-radio-group,
169 zen-select,
170 zen-slider,
171 zen-switch,
172 zen-textarea
173 )[size="lg"] {
174 --zenbu-control-height: var(--zenbu-sys-control-height-lg);
175 --zenbu-control-padding-block: var(--zenbu-sys-control-padding-block-lg);
176 --zenbu-control-padding-inline: var(--zenbu-sys-control-padding-inline-lg);
177 --zenbu-control-gap: var(--zenbu-sys-control-gap-lg);
178 --zenbu-control-font-size: var(--zenbu-sys-font-size-lg);
179 --zenbu-control-line-height: var(--zenbu-sys-control-line-height-lg);
180 --zenbu-control-icon-size: var(--zenbu-sys-icon-size-lg);
181 }
182
183 :where(
184 zen-button,
185 zen-calendar,
186 zen-checkbox,
187 zen-combobox,
188 zen-command,
189 zen-date-picker,
190 zen-field,
191 zen-form,
192 zen-input,
193 zen-input-group,
194 zen-input-otp,
195 zen-native-select,
196 zen-radio-group,
197 zen-select,
198 zen-slider,
199 zen-switch,
200 zen-textarea
201 )[size="xl"] {
202 --zenbu-control-height: var(--zenbu-sys-control-height-xl);
203 --zenbu-control-padding-block: var(--zenbu-sys-control-padding-block-xl);
204 --zenbu-control-padding-inline: var(--zenbu-sys-control-padding-inline-xl);
205 --zenbu-control-gap: var(--zenbu-sys-control-gap-xl);
206 --zenbu-control-font-size: var(--zenbu-sys-font-size-xl);
207 --zenbu-control-line-height: var(--zenbu-sys-control-line-height-xl);
208 --zenbu-control-icon-size: var(--zenbu-sys-icon-size-xl);
209 }
210
211 zen-box {
212 display: block;
213 padding: var(--zenbu-box-padding, 0);
214 }
215
216 zen-box[padding="xs"] { --zenbu-box-padding: var(--zenbu-sys-padding-xs); }
217 zen-box[padding="sm"] { --zenbu-box-padding: var(--zenbu-sys-padding-sm); }
218 zen-box[padding="md"] { --zenbu-box-padding: var(--zenbu-sys-padding-md); }
219 zen-box[padding="lg"] { --zenbu-box-padding: var(--zenbu-sys-padding-lg); }
220 zen-box[padding="xl"] { --zenbu-box-padding: var(--zenbu-sys-padding-xl); }
221
222 :where(zen-text, zen-heading) {
223 display: contents;
224 --zenbu-type-font-size: var(--zenbu-sys-font-size-md);
225 --zenbu-type-line-height: var(--zenbu-sys-line-height-md);
226 }
227
228 :where(zen-text, zen-heading)[size="xs"] {
229 --zenbu-type-font-size: var(--zenbu-sys-font-size-xs);
230 --zenbu-type-line-height: var(--zenbu-sys-line-height-xs);
231 }
232
233 :where(zen-text, zen-heading)[size="sm"] {
234 --zenbu-type-font-size: var(--zenbu-sys-font-size-sm);
235 --zenbu-type-line-height: var(--zenbu-sys-line-height-sm);
236 }
237
238 :where(zen-text, zen-heading)[size="md"] {
239 --zenbu-type-font-size: var(--zenbu-sys-font-size-md);
240 --zenbu-type-line-height: var(--zenbu-sys-line-height-md);
241 }
242
243 :where(zen-text, zen-heading)[size="lg"] {
244 --zenbu-type-font-size: var(--zenbu-sys-font-size-lg);
245 --zenbu-type-line-height: var(--zenbu-sys-line-height-lg);
246 }
247
248 :where(zen-text, zen-heading)[size="xl"] {
249 --zenbu-type-font-size: var(--zenbu-sys-font-size-xl);
250 --zenbu-type-line-height: var(--zenbu-sys-line-height-xl);
251 }
252
253 zen-text > :where(span, p, small, strong) {
254 font-size: var(--zenbu-type-font-size);
255 line-height: var(--zenbu-type-line-height);
256 }
257
258 zen-heading {
259 --zenbu-type-font-size: var(--zenbu-sys-font-size-2xl);
260 --zenbu-type-line-height: var(--zenbu-sys-line-height-xl);
261 }
262
263 zen-heading > :where(h1, h2, h3, h4, h5, h6) {
264 font-size: var(--zenbu-type-font-size);
265 font-weight: var(--zenbu-sys-font-weight-display);
266 line-height: var(--zenbu-type-line-height);
267 }
268
269 zen-icon {
270 --zenbu-icon-size: 1em;
271 display: inline-grid;
272 width: var(--zenbu-icon-size, 1em);
273 height: var(--zenbu-icon-size, 1em);
274 flex: 0 0 auto;
275 place-items: center;
276 color: inherit;
277 vertical-align: -0.125em;
278 }
279
280 zen-icon > svg {
281 display: block;
282 width: 100%;
283 height: 100%;
284 }
285
286 zen-link {
287 display: contents;
288 }
289
290 zen-link[effect="paw"] > a > [data-zen-link-decoration] {
291 width: 1em;
292 height: 1em;
293 margin-inline-end: var(--zenbu-sys-space-related);
294 color: var(--zenbu-sys-color-link-decoration);
295 animation: zen-paw-step 600ms ease-out both;
296 }
297
298 zen-link[effect="paw"] > a:hover > [data-zen-link-decoration] {
299 animation: zen-paw-wiggle 400ms ease-in-out infinite;
300 }
301
302 :where(
303 zen-alert-dialog,
304 zen-calendar,
305 zen-combobox,
306 zen-command,
307 zen-date-picker,
308 zen-dialog,
309 zen-drawer,
310 zen-form,
311 zen-input-otp,
312 zen-popover,
313 zen-progress,
314 zen-radio-group,
315 zen-resizable,
316 zen-select,
317 zen-sheet,
318 zen-sidebar,
319 zen-slider,
320 zen-tabs
321 ) {
322 display: block;
323 }
324
325 :where(
326 zen-accordion,
327 zen-collapsible
328 ) {
329 display: block;
330 }
331
332 :where(
333 zen-accordion,
334 zen-collapsible
335 ) details {
336 interpolate-size: allow-keywords;
337 border-block-end: 1px solid color-mix(
338 in srgb,
339 var(--zenbu-sys-color-border-default) 28%,
340 transparent
341 );
342 }
343
344 :where(
345 zen-accordion,
346 zen-collapsible
347 ) summary {
348 display: flex;
349 align-items: center;
350 gap: var(--zenbu-sys-space-control);
351 padding: var(--zenbu-sys-space-control) 0;
352 font-weight: 800;
353 list-style: none;
354 cursor: pointer;
355 }
356
357 :where(
358 zen-accordion,
359 zen-collapsible
360 ) summary::marker,
361 :where(
362 zen-accordion,
363 zen-collapsible
364 ) summary::-webkit-details-marker {
365 display: none;
366 content: "";
367 }
368
369 :where(
370 zen-accordion,
371 zen-collapsible
372 ) summary > [data-zen-disclosure-icon] {
373 margin-inline-start: auto;
374 transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
375 }
376
377 :where(
378 zen-accordion,
379 zen-collapsible
380 ) details[open] > summary > [data-zen-disclosure-icon] {
381 transform: rotate(180deg);
382 }
383
384 :where(
385 zen-accordion,
386 zen-collapsible
387 ) details::details-content {
388 block-size: 0;
389 overflow: clip;
390 opacity: 0;
391 transition:
392 block-size 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
393 content-visibility 220ms allow-discrete,
394 opacity 180ms ease;
395 }
396
397 :where(
398 zen-accordion,
399 zen-collapsible
400 ) details[open]::details-content {
401 block-size: auto;
402 opacity: 1;
403 }
404
405 :where(
406 zen-accordion,
407 zen-collapsible
408 ) details > :not(summary) {
409 margin-block-start: 0;
410 padding-block-end: var(--zenbu-sys-space-control);
411 color: var(--zenbu-sys-color-text-secondary);
412 }
413
414 :where(
415 zen-alert-dialog,
416 zen-dialog,
417 zen-drawer,
418 zen-sheet
419 ) > [data-zen-trigger],
420 :where(
421 zen-dropdown-menu,
422 zen-menubar,
423 zen-navigation-menu,
424 zen-popover
425 ) [data-zen-trigger],
426 zen-empty > button,
427 zen-form button,
428 zen-input-group button {
429 min-height: var(--zenbu-control-height);
430 padding:
431 var(--zenbu-control-padding-block)
432 var(--zenbu-control-padding-inline);
433 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
434 border-radius: var(--zenbu-sys-radius-control);
435 box-shadow: var(--zenbu-sys-shadow-subtle);
436 background: var(--zenbu-sys-color-action-primary-background);
437 color: var(--zenbu-sys-color-action-primary-foreground);
438 font-weight: 800;
439 cursor: pointer;
440 }
441
442 :where(
443 zen-alert-dialog,
444 zen-dialog,
445 zen-drawer,
446 zen-sheet
447 ) dialog {
448 width: min(32rem, calc(100vi - 2rem));
449 padding: var(--zenbu-sys-space-container);
450 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
451 border-radius: var(--zenbu-sys-radius-container);
452 box-shadow: var(--zenbu-sys-shadow-raised);
453 background: var(--zenbu-sys-color-surface-raised);
454 color: var(--zenbu-sys-color-text-primary);
455 }
456
457 :where(
458 zen-alert-dialog,
459 zen-dialog,
460 zen-drawer,
461 zen-sheet
462 ) dialog[open],
463 :where(
464 zen-combobox,
465 zen-command,
466 zen-context-menu,
467 zen-dropdown-menu,
468 zen-hover-card,
469 zen-menubar,
470 zen-navigation-menu,
471 zen-popover,
472 zen-tooltip
473 ) :where(
474 [data-zen-content],
475 [role="listbox"],
476 [role="menu"]
477 ):not([hidden]) {
478 animation: zen-surface-open 160ms ease-out;
479 }
480
481 :where(
482 zen-alert-dialog,
483 zen-dialog,
484 zen-drawer,
485 zen-sheet
486 ) dialog::backdrop {
487 background: var(--zenbu-sys-color-scrim);
488 backdrop-filter: blur(3px);
489 }
490
491 :where(
492 zen-alert-dialog,
493 zen-dialog,
494 zen-drawer,
495 zen-sheet
496 ) dialog > h3 {
497 margin-block-start: 0;
498 }
499
500 :where(
501 zen-alert-dialog,
502 zen-dialog,
503 zen-drawer,
504 zen-sheet
505 ) dialog button {
506 min-height: 2.35rem;
507 margin-inline-end: var(--zenbu-sys-space-related);
508 padding-inline: var(--zenbu-sys-space-control);
509 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
510 border-radius: var(--zenbu-sys-radius-control-small);
511 background: var(--zenbu-sys-color-surface-default);
512 color: var(--zenbu-sys-color-text-primary);
513 font-weight: 700;
514 cursor: pointer;
515 }
516
517 zen-alert-dialog dialog button[value="confirm"] {
518 background: var(--zenbu-sys-color-danger-foreground);
519 color: var(--zenbu-sys-color-text-inverse);
520 }
521
522 :where(zen-sheet, zen-drawer) dialog {
523 position: fixed;
524 max-width: none;
525 max-height: none;
526 margin: 0;
527 }
528
529 :where(zen-sheet, zen-drawer)[placement="right"] dialog {
530 inset: 0 0 0 auto;
531 width: min(28rem, 92vi);
532 height: 100vb;
533 border-radius: var(--zenbu-sys-radius-container) 0 0 var(--zenbu-sys-radius-container);
534 }
535
536 :where(zen-sheet, zen-drawer)[placement="left"] dialog {
537 inset: 0 auto 0 0;
538 width: min(28rem, 92vi);
539 height: 100vb;
540 border-radius: 0 var(--zenbu-sys-radius-container) var(--zenbu-sys-radius-container) 0;
541 }
542
543 :where(zen-sheet, zen-drawer)[placement="bottom"] dialog,
544 zen-drawer:not([placement]) dialog {
545 inset: auto 0 0;
546 width: 100vi;
547 border-radius: var(--zenbu-sys-radius-container) var(--zenbu-sys-radius-container) 0 0;
548 }
549
550 zen-aspect-ratio {
551 --zenbu-aspect-ratio: 16 / 9;
552 display: block;
553 aspect-ratio: var(--zenbu-aspect-ratio, 16 / 9);
554 overflow: hidden;
555 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
556 border-radius: var(--zenbu-sys-radius-container);
557 background: var(--zenbu-sys-color-surface-default);
558 }
559
560 zen-aspect-ratio > * {
561 width: 100%;
562 height: 100%;
563 }
564
565 .demo-media {
566 display: grid;
567 place-items: center;
568 background: var(--zenbu-sys-color-surface-subtle);
569 color: var(--zenbu-sys-color-text-primary);
570 font-size: var(--zenbu-sys-font-size-lg);
571 font-weight: 900;
572 }
573
574 zen-attachment {
575 display: grid;
576 grid-template-columns: 3rem minmax(0, 1fr) auto;
577 align-items: center;
578 gap: var(--zenbu-sys-space-control);
579 padding: var(--zenbu-sys-space-control);
580 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
581 border-radius: var(--zenbu-sys-radius-control);
582 background: var(--zenbu-sys-color-surface-default);
583 }
584
585 zen-attachment > span {
586 display: grid;
587 width: 3rem;
588 height: 3rem;
589 place-items: center;
590 border-radius: var(--zenbu-sys-radius-control-small);
591 background: var(--zenbu-sys-color-info-foreground);
592 color: var(--zenbu-sys-color-text-inverse);
593 font-size: var(--zenbu-sys-font-size-xs);
594 font-weight: 900;
595 }
596
597 zen-attachment > div,
598 zen-item > div {
599 display: grid;
600 }
601
602 :where(zen-attachment, zen-item) small {
603 color: var(--zenbu-sys-color-text-secondary);
604 }
605
606 :where(zen-attachment, zen-item) > button {
607 border: 0;
608 background: transparent;
609 color: inherit;
610 cursor: pointer;
611 }
612
613 zen-avatar {
614 --zenbu-avatar-size: var(--zenbu-sys-control-height-md);
615 display: inline-grid;
616 width: var(--zenbu-avatar-size, 2.75rem);
617 height: var(--zenbu-avatar-size, 2.75rem);
618 overflow: hidden;
619 place-items: center;
620 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
621 border-radius: 50%;
622 background: var(--zenbu-sys-color-action-primary-background);
623 color: var(--zenbu-sys-color-action-primary-foreground);
624 font-weight: 900;
625 }
626
627 zen-avatar > img {
628 width: 100%;
629 height: 100%;
630 object-fit: cover;
631 }
632
633 zen-badge {
634 display: inline-flex;
635 align-items: center;
636 min-height: 1.75rem;
637 padding: 0 var(--zenbu-sys-space-related);
638 border: 1px solid var(--zenbu-sys-color-border-default);
639 border-radius: 999px;
640 background: var(--zenbu-sys-color-surface-default);
641 font-size: var(--zenbu-sys-font-size-xs);
642 font-weight: 850;
643 }
644
645 zen-badge[tone="success"] {
646 background: var(--zenbu-sys-color-success-foreground);
647 color: var(--zenbu-sys-color-text-inverse);
648 }
649
650 zen-badge[tone="danger"] {
651 background: var(--zenbu-sys-color-danger-foreground);
652 color: var(--zenbu-sys-color-text-inverse);
653 }
654
655 :where(zen-breadcrumb, zen-pagination) nav {
656 display: flex;
657 align-items: center;
658 gap: var(--zenbu-sys-space-related);
659 }
660
661 zen-breadcrumb ol {
662 display: flex;
663 flex-wrap: wrap;
664 align-items: center;
665 gap: var(--zenbu-sys-space-related);
666 margin: 0;
667 padding: 0;
668 list-style: none;
669 }
670
671 zen-breadcrumb li:not(:last-child)::after {
672 margin-inline-start: var(--zenbu-sys-space-related);
673 color: var(--zenbu-sys-color-text-secondary);
674 content: "/";
675 }
676
677 :where(zen-breadcrumb, zen-pagination) a {
678 color: var(--zenbu-sys-color-info-foreground);
679 text-underline-offset: 0.2em;
680 }
681
682 zen-bubble {
683 display: block;
684 width: fit-content;
685 max-width: min(42rem, 88%);
686 padding: var(--zenbu-sys-space-control) var(--zenbu-sys-space-group);
687 border-radius: var(--zenbu-sys-radius-container) var(--zenbu-sys-radius-container)
688 var(--zenbu-sys-radius-container) var(--zenbu-sys-radius-control-small);
689 background: var(--zenbu-sys-color-surface-raised);
690 box-shadow: var(--zenbu-sys-shadow-subtle);
691 }
692
693 zen-bubble[align="end"] {
694 margin-inline-start: auto;
695 border-radius: var(--zenbu-sys-radius-container) var(--zenbu-sys-radius-container)
696 var(--zenbu-sys-radius-control-small) var(--zenbu-sys-radius-container);
697 background: var(--zenbu-sys-color-action-primary-background);
698 color: var(--zenbu-sys-color-action-primary-foreground);
699 }
700
701 zen-bubble > :first-child {
702 margin-block-start: 0;
703 }
704
705 zen-bubble > :last-child {
706 margin-block-end: 0;
707 }
708
709 zen-button-group {
710 display: inline-flex;
711 }
712
713 zen-button-group > :where(button, a) {
714 min-height: 2.5rem;
715 padding-inline: var(--zenbu-sys-space-control);
716 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
717 border-radius: 0;
718 background: var(--zenbu-sys-color-surface-default);
719 color: var(--zenbu-sys-color-text-primary);
720 font-weight: 750;
721 cursor: pointer;
722 }
723
724 zen-button-group > :first-child {
725 border-radius: var(--zenbu-sys-radius-control) 0 0 var(--zenbu-sys-radius-control);
726 }
727
728 zen-button-group > :last-child {
729 border-radius: 0 var(--zenbu-sys-radius-control) var(--zenbu-sys-radius-control) 0;
730 }
731
732 zen-button-group > :not(:first-child) {
733 margin-inline-start: calc(-1 * var(--zenbu-sys-stroke-width-emphasis));
734 }
735
736 :where(
737 zen-calendar,
738 zen-date-picker,
739 zen-slider
740 ) {
741 display: grid;
742 gap: var(--zenbu-sys-space-related);
743 max-width: 22rem;
744 }
745
746 :where(
747 zen-calendar,
748 zen-date-picker,
749 zen-input,
750 zen-input-group,
751 zen-input-otp,
752 zen-native-select,
753 zen-select,
754 zen-slider,
755 zen-textarea
756 ):not([appearance="plain"]) :where(input, select, textarea) {
757 appearance: none;
758 min-height: var(--zenbu-control-height);
759 box-sizing: border-box;
760 padding:
761 var(--zenbu-control-padding-block)
762 var(--zenbu-control-padding-inline);
763 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
764 border-radius: var(--zenbu-sys-radius-control);
765 background: var(--zenbu-sys-color-surface-default);
766 color: var(--zenbu-sys-color-text-primary);
767 font-family: inherit;
768 font-size: var(--zenbu-control-font-size);
769 line-height: var(--zenbu-control-line-height);
770 }
771
772 :where(
773 zen-input,
774 zen-input-group,
775 zen-input-otp,
776 zen-native-select,
777 zen-select,
778 zen-textarea,
779 zen-calendar,
780 zen-date-picker
781 ):not([appearance="plain"]) :where(input, select, textarea),
782 zen-field:not([appearance="plain"]) > :where(input, select, textarea) {
783 appearance: none;
784 border-radius: var(--zenbu-sys-radius-control);
785 background: var(--zenbu-sys-color-surface-default);
786 color: var(--zenbu-sys-color-text-primary);
787 }
788
789 :where(zen-native-select, zen-select) {
790 position: relative;
791 }
792
793 :where(zen-native-select, zen-select) select {
794 width: 100%;
795 padding-inline-end: 2.75rem;
796 cursor: pointer;
797 }
798
799 :where(zen-native-select, zen-select) > [data-zen-select-icon] {
800 position: absolute;
801 inset-inline-end: var(--zenbu-sys-space-control);
802 inset-block-end: 0.9rem;
803 pointer-events: none;
804 }
805
806 :where(
807 zen-calendar,
808 zen-date-picker,
809 zen-input,
810 zen-native-select,
811 zen-select,
812 zen-textarea
813 ):not([appearance="plain"]) {
814 display: grid;
815 gap: var(--zenbu-sys-space-related);
816 }
817
818 zen-textarea:not([appearance="plain"]) textarea {
819 width: 100%;
820 min-height: 8rem;
821 resize: vertical;
822 }
823
824 :where(
825 zen-checkbox,
826 zen-input,
827 zen-native-select,
828 zen-radio-group,
829 zen-select,
830 zen-slider,
831 zen-switch,
832 zen-textarea
833 )[appearance="plain"] {
834 display: contents;
835 color: inherit;
836 font-family: inherit;
837 }
838
839 :where(zen-calendar, zen-date-picker) > input[data-zen-calendar-input] {
840 position: absolute;
841 width: 1px;
842 height: 1px;
843 overflow: hidden;
844 clip-path: inset(50%);
845 pointer-events: none;
846 }
847
848 :where(zen-calendar, zen-date-picker) [data-zen-generated="calendar"] {
849 display: grid;
850 gap: var(--zenbu-sys-space-related);
851 }
852
853 zen-date-picker [data-zen-generated="calendar"] {
854 position: relative;
855 }
856
857 :where(zen-calendar, zen-date-picker) :where(
858 [data-zen-date-trigger],
859 [data-zen-calendar-previous],
860 [data-zen-calendar-next],
861 [data-zen-calendar-day]
862 ) {
863 appearance: none;
864 border: 0;
865 background: transparent;
866 color: var(--zenbu-sys-color-text-primary);
867 font: inherit;
868 cursor: pointer;
869 }
870
871 zen-date-picker [data-zen-date-trigger] {
872 display: inline-flex;
873 min-height: var(--zenbu-control-height);
874 align-items: center;
875 gap: var(--zenbu-control-gap);
876 justify-content: flex-start;
877 padding:
878 var(--zenbu-control-padding-block)
879 var(--zenbu-control-padding-inline);
880 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
881 border-radius: var(--zenbu-sys-radius-control);
882 box-shadow: var(--zenbu-sys-shadow-subtle);
883 background: var(--zenbu-sys-color-surface-default);
884 }
885
886 zen-date-picker[data-invalid] [data-zen-date-trigger],
887 zen-calendar[data-invalid] [data-zen-calendar-view] {
888 border-color: var(--zenbu-sys-color-danger-foreground);
889 }
890
891 zen-date-picker [data-zen-calendar-panel] {
892 position: absolute;
893 z-index: 40;
894 inset-block-start: calc(100% + var(--zenbu-sys-space-related));
895 inset-inline-start: 0;
896 width: min(21rem, calc(100vi - 2rem));
897 padding: var(--zenbu-sys-space-control);
898 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
899 border-radius: var(--zenbu-sys-radius-container);
900 box-shadow: var(--zenbu-sys-shadow-raised);
901 background: var(--zenbu-sys-color-surface-raised);
902 transform-origin: top left;
903 animation: zen-calendar-open 160ms ease-out;
904 }
905
906 zen-date-picker [data-zen-calendar-panel][hidden] {
907 display: none;
908 }
909
910 :where(zen-calendar, zen-date-picker) [data-zen-calendar-view] {
911 display: grid;
912 gap: var(--zenbu-sys-space-related);
913 padding: var(--zenbu-sys-space-control);
914 border: 1px solid var(--zenbu-sys-color-border-subtle);
915 border-radius: var(--zenbu-sys-radius-container);
916 background: var(--zenbu-sys-color-surface-default);
917 }
918
919 zen-date-picker [data-zen-calendar-view] {
920 padding: 0;
921 border: 0;
922 }
923
924 :where(zen-calendar, zen-date-picker) [data-zen-calendar-view] > header {
925 display: grid;
926 grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
927 align-items: center;
928 gap: var(--zenbu-sys-space-related);
929 text-align: center;
930 }
931
932 :where(zen-calendar, zen-date-picker) :where(
933 [data-zen-calendar-previous],
934 [data-zen-calendar-next]
935 ) {
936 display: grid;
937 width: 2.5rem;
938 height: 2.5rem;
939 place-items: center;
940 border: 1px solid var(--zenbu-sys-color-border-subtle);
941 border-radius: 50%;
942 }
943
944 :where(zen-calendar, zen-date-picker) :where(
945 [data-zen-calendar-previous],
946 [data-zen-calendar-next]
947 ):hover {
948 background: var(--zenbu-sys-color-action-neutral-background-hover);
949 }
950
951 :where(zen-calendar, zen-date-picker) [data-zen-calendar-weekdays],
952 :where(zen-calendar, zen-date-picker) [data-zen-calendar-grid] > [role="row"] {
953 display: grid;
954 grid-template-columns: repeat(7, minmax(2rem, 1fr));
955 gap: var(--zenbu-sys-space-icon-label);
956 }
957
958 :where(zen-calendar, zen-date-picker) [data-zen-calendar-weekdays] > span {
959 padding-block: var(--zenbu-sys-space-icon-label);
960 color: var(--zenbu-sys-color-text-secondary);
961 font-size: var(--zenbu-sys-font-size-xs);
962 font-weight: 800;
963 text-align: center;
964 }
965
966 :where(zen-calendar, zen-date-picker) [data-zen-calendar-grid] {
967 display: grid;
968 gap: var(--zenbu-sys-space-icon-label);
969 }
970
971 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day] {
972 aspect-ratio: 1;
973 min-width: 2rem;
974 border-radius: 50%;
975 font-size: var(--zenbu-sys-font-size-sm);
976 }
977
978 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day]:hover {
979 background: var(--zenbu-sys-color-action-neutral-background-hover);
980 }
981
982 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day][data-outside] {
983 color: var(--zenbu-sys-color-text-tertiary);
984 opacity: 0.55;
985 }
986
987 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day][data-today] {
988 outline: 1px solid var(--zenbu-sys-color-info-foreground);
989 outline-offset: -2px;
990 }
991
992 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day][aria-selected="true"] {
993 background: var(--zenbu-sys-color-action-primary-background);
994 color: var(--zenbu-sys-color-action-primary-foreground);
995 font-weight: 900;
996 }
997
998 :where(zen-calendar, zen-date-picker) [data-zen-calendar-day]:disabled {
999 color: var(--zenbu-sys-color-text-disabled);
1000 cursor: not-allowed;
1001 }
1002
1003 @keyframes zen-calendar-open {
1004 from {
1005 opacity: 0;
1006 transform: translateY(calc(-1 * var(--zenbu-sys-space-icon-label))) scale(0.98);
1007 }
1008 }
1009
1010 @keyframes zen-paw-step {
1011 from {
1012 opacity: 0;
1013 transform: scale(0);
1014 }
1015 to {
1016 opacity: 1;
1017 transform: scale(1);
1018 }
1019 }
1020
1021 @keyframes zen-paw-wiggle {
1022 0%,
1023 100% {
1024 transform: rotate(-15deg);
1025 }
1026 50% {
1027 transform: rotate(15deg);
1028 }
1029 }
1030
1031 @keyframes zen-surface-open {
1032 from {
1033 opacity: 0;
1034 transform: translateY(calc(-1 * var(--zenbu-sys-space-icon-label))) scale(0.98);
1035 }
1036 }
1037
1038 @media print {
1039 zen-link[effect="paw"] > a > [data-zen-link-decoration] {
1040 display: none;
1041 }
1042 }
1043
1044 zen-input-group {
1045 display: flex;
1046 align-items: stretch;
1047 width: min(100%, 36rem);
1048 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1049 border-radius: var(--zenbu-sys-radius-control);
1050 background: var(--zenbu-sys-color-surface-default);
1051 }
1052
1053 zen-input-group > :where(span, button) {
1054 display: inline-flex;
1055 align-items: center;
1056 padding-inline: var(--zenbu-sys-space-control);
1057 }
1058
1059 zen-input-group input {
1060 min-width: 0;
1061 flex: 1;
1062 border: 0;
1063 border-radius: 0;
1064 }
1065
1066 zen-input-group button {
1067 min-height: auto;
1068 border-width: 0 0 0 var(--zenbu-sys-stroke-width-emphasis);
1069 border-radius: 0 var(--zenbu-sys-radius-control-small) var(--zenbu-sys-radius-control-small) 0;
1070 box-shadow: none;
1071 }
1072
1073 zen-carousel {
1074 position: relative;
1075 display: grid;
1076 grid-template-columns: auto minmax(0, 1fr) auto;
1077 align-items: center;
1078 gap: var(--zenbu-sys-space-related);
1079 }
1080
1081 zen-carousel [data-zen-viewport] {
1082 display: flex;
1083 grid-column: 1 / -1;
1084 gap: var(--zenbu-sys-space-control);
1085 overflow: auto;
1086 scroll-snap-type: inline mandatory;
1087 scrollbar-width: none;
1088 }
1089
1090 zen-carousel [data-zen-viewport] > * {
1091 min-width: min(22rem, 82vi);
1092 min-height: 9rem;
1093 padding: var(--zenbu-sys-space-container);
1094 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1095 border-radius: var(--zenbu-sys-radius-container);
1096 background: var(--zenbu-sys-color-surface-raised);
1097 scroll-snap-align: start;
1098 }
1099
1100 zen-carousel :where([data-zen-prev], [data-zen-next]) {
1101 width: 2.5rem;
1102 height: 2.5rem;
1103 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1104 border-radius: 50%;
1105 background: var(--zenbu-sys-color-surface-default);
1106 color: var(--zenbu-sys-color-text-primary);
1107 cursor: pointer;
1108 }
1109
1110 zen-carousel [data-zen-prev] {
1111 grid-column: 1;
1112 }
1113
1114 zen-carousel [data-zen-next] {
1115 grid-column: 3;
1116 }
1117
1118 zen-chart {
1119 display: block;
1120 min-height: 15rem;
1121 padding: var(--zenbu-sys-space-group);
1122 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1123 border-radius: var(--zenbu-sys-radius-container);
1124 background: var(--zenbu-sys-color-surface-default);
1125 }
1126
1127 zen-chart [data-zen-chart-plot] {
1128 display: flex;
1129 height: 12rem;
1130 align-items: end;
1131 justify-content: space-around;
1132 gap: var(--zenbu-sys-space-control);
1133 border-block-end: 1px solid var(--zenbu-sys-color-border-default);
1134 }
1135
1136 zen-chart [data-zen-chart-plot] > span {
1137 --zenbu-chart-value: 0%;
1138 position: relative;
1139 width: min(3rem, 15%);
1140 height: var(--zenbu-chart-value);
1141 min-height: 1rem;
1142 border-radius: var(--zenbu-sys-radius-control-small) var(--zenbu-sys-radius-control-small) 0 0;
1143 background: var(--zenbu-sys-color-data-1);
1144 }
1145
1146 zen-chart [data-zen-chart-plot] > span:nth-child(2) {
1147 background: var(--zenbu-sys-color-data-2);
1148 }
1149
1150 zen-chart [data-zen-chart-plot] > span:nth-child(3) {
1151 background: var(--zenbu-sys-color-data-3);
1152 }
1153
1154 zen-chart [data-zen-chart-plot] > span:nth-child(4) {
1155 background: var(--zenbu-sys-color-data-4);
1156 }
1157
1158 zen-chart [data-zen-chart-plot] > span:nth-child(5) {
1159 background: var(--zenbu-sys-color-data-5);
1160 }
1161
1162 zen-chart [data-zen-chart-plot] > span::after {
1163 position: absolute;
1164 inset-block-start: 100%;
1165 inset-inline-start: 50%;
1166 padding-block-start: var(--zenbu-sys-space-icon-label);
1167 color: var(--zenbu-sys-color-text-secondary);
1168 content: attr(data-label);
1169 font-size: var(--zenbu-sys-font-size-xs);
1170 transform: translateX(-50%);
1171 }
1172
1173 :where(
1174 zen-checkbox:not([appearance="plain"]),
1175 zen-switch:not([appearance="plain"])
1176 ) label,
1177 zen-radio-group:not([appearance="plain"]) label {
1178 display: flex;
1179 align-items: center;
1180 gap: var(--zenbu-sys-space-related);
1181 width: fit-content;
1182 cursor: pointer;
1183 }
1184
1185 :where(
1186 zen-checkbox:not([appearance="plain"]),
1187 zen-radio-group:not([appearance="plain"])
1188 ) input {
1189 appearance: none;
1190 display: inline-grid;
1191 width: 1.2rem;
1192 height: 1.2rem;
1193 flex: 0 0 auto;
1194 place-content: center;
1195 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1196 background: var(--zenbu-sys-color-surface-default);
1197 cursor: pointer;
1198 }
1199
1200 zen-checkbox:not([appearance="plain"]) input {
1201 border-radius: var(--zenbu-sys-radius-control-small);
1202 }
1203
1204 zen-checkbox:not([appearance="plain"]) input::before {
1205 width: 0.55rem;
1206 height: 0.3rem;
1207 border-block-end: 2px solid var(--zenbu-sys-color-action-primary-foreground);
1208 border-inline-start: 2px solid var(--zenbu-sys-color-action-primary-foreground);
1209 content: "";
1210 opacity: 0;
1211 transform: translateY(-0.08rem) rotate(-45deg);
1212 }
1213
1214 zen-checkbox:not([appearance="plain"]) input:checked {
1215 background: var(--zenbu-sys-color-action-primary-background);
1216 }
1217
1218 zen-checkbox:not([appearance="plain"]) input:checked::before {
1219 opacity: 1;
1220 }
1221
1222 zen-radio-group:not([appearance="plain"]) input {
1223 border-radius: 50%;
1224 }
1225
1226 zen-radio-group:not([appearance="plain"]) input::before {
1227 width: 0.55rem;
1228 height: 0.55rem;
1229 border-radius: 50%;
1230 background: var(--zenbu-sys-color-info-foreground);
1231 content: "";
1232 opacity: 0;
1233 }
1234
1235 zen-radio-group:not([appearance="plain"]) input:checked::before {
1236 opacity: 1;
1237 }
1238
1239 zen-radio-group:not([appearance="plain"]) fieldset {
1240 display: grid;
1241 gap: var(--zenbu-sys-space-related);
1242 padding: var(--zenbu-sys-space-group);
1243 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1244 border-radius: var(--zenbu-sys-radius-control);
1245 }
1246
1247 zen-switch:not([appearance="plain"]) input {
1248 appearance: none;
1249 width: 2.75rem;
1250 height: 1.5rem;
1251 margin: 0;
1252 padding: 2px;
1253 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1254 border-radius: 999px;
1255 background: var(--zenbu-sys-color-surface-default);
1256 cursor: pointer;
1257 transition: background var(--zenbu-sys-motion-duration-feedback) ease;
1258 }
1259
1260 zen-switch:not([appearance="plain"]) input::before {
1261 display: block;
1262 width: 1rem;
1263 height: 1rem;
1264 border-radius: 50%;
1265 background: var(--zenbu-sys-color-border-default);
1266 content: "";
1267 transition: transform var(--zenbu-sys-motion-duration-feedback) ease;
1268 }
1269
1270 zen-switch:not([appearance="plain"]) input:checked {
1271 background: var(--zenbu-sys-color-success-foreground);
1272 }
1273
1274 zen-switch:not([appearance="plain"]) input:checked::before {
1275 background: var(--zenbu-sys-color-text-inverse);
1276 transform: translateX(1.2rem);
1277 }
1278
1279 :where(zen-combobox, zen-command) {
1280 position: relative;
1281 display: grid;
1282 width: min(100%, 28rem);
1283 gap: var(--zenbu-sys-space-related);
1284 }
1285
1286 :where(zen-combobox, zen-command) > input {
1287 min-height: var(--zenbu-control-height);
1288 padding:
1289 var(--zenbu-control-padding-block)
1290 var(--zenbu-control-padding-inline);
1291 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1292 border-radius: var(--zenbu-sys-radius-control);
1293 background: var(--zenbu-sys-color-surface-default);
1294 color: var(--zenbu-sys-color-text-primary);
1295 }
1296
1297 :where(
1298 zen-combobox,
1299 zen-command,
1300 zen-context-menu,
1301 zen-dropdown-menu,
1302 zen-menubar,
1303 zen-navigation-menu
1304 ) :where([role="listbox"], [role="menu"]) {
1305 z-index: 20;
1306 display: grid;
1307 min-width: 12rem;
1308 padding: var(--zenbu-sys-space-icon-label);
1309 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1310 border-radius: var(--zenbu-sys-radius-control);
1311 box-shadow: var(--zenbu-sys-shadow-raised);
1312 background: var(--zenbu-sys-color-surface-raised);
1313 }
1314
1315 :where(
1316 zen-combobox,
1317 zen-command,
1318 zen-context-menu,
1319 zen-dropdown-menu,
1320 zen-menubar,
1321 zen-navigation-menu
1322 ) :where([role="listbox"], [role="menu"])[hidden] {
1323 display: none;
1324 }
1325
1326 :where(
1327 zen-combobox,
1328 zen-command,
1329 zen-context-menu,
1330 zen-dropdown-menu,
1331 zen-menubar,
1332 zen-navigation-menu
1333 ) :where([role="option"], [role="menuitem"]) {
1334 display: block;
1335 width: 100%;
1336 padding: var(--zenbu-sys-space-related) var(--zenbu-sys-space-control);
1337 border: 0;
1338 border-radius: var(--zenbu-sys-radius-control-small);
1339 background: transparent;
1340 color: var(--zenbu-sys-color-text-primary);
1341 text-align: start;
1342 text-decoration: none;
1343 cursor: pointer;
1344 }
1345
1346 :where(
1347 zen-combobox,
1348 zen-command,
1349 zen-context-menu,
1350 zen-dropdown-menu,
1351 zen-menubar,
1352 zen-navigation-menu
1353 ) :where([role="option"], [role="menuitem"]):is(
1354 :hover,
1355 :focus,
1356 [aria-selected="true"]
1357 ) {
1358 outline: none;
1359 background: var(--zenbu-sys-color-action-primary-background);
1360 color: var(--zenbu-sys-color-action-primary-foreground);
1361 }
1362
1363 :where(
1364 zen-context-menu,
1365 zen-dropdown-menu,
1366 zen-navigation-menu
1367 ) {
1368 position: relative;
1369 display: inline-block;
1370 }
1371
1372 zen-context-menu > [data-zen-trigger] {
1373 min-height: 8rem;
1374 padding: var(--zenbu-sys-space-container);
1375 border: 2px dashed var(--zenbu-sys-color-border-default);
1376 border-radius: var(--zenbu-sys-radius-container);
1377 background: var(--zenbu-sys-color-surface-default);
1378 }
1379
1380 :where(
1381 zen-dropdown-menu,
1382 zen-navigation-menu
1383 ) > [role="menu"],
1384 zen-navigation-menu nav > [role="menu"] {
1385 position: absolute;
1386 inset-block-start: calc(100% + var(--zenbu-sys-space-related));
1387 inset-inline-start: 0;
1388 }
1389
1390 zen-context-menu > [role="menu"] {
1391 position: fixed;
1392 }
1393
1394 zen-menubar {
1395 position: relative;
1396 display: flex;
1397 width: fit-content;
1398 padding: var(--zenbu-sys-space-icon-label);
1399 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1400 border-radius: var(--zenbu-sys-radius-control);
1401 background: var(--zenbu-sys-color-surface-default);
1402 }
1403
1404 zen-menubar > [data-zen-trigger] {
1405 border: 0;
1406 box-shadow: none;
1407 background: transparent;
1408 color: var(--zenbu-sys-color-text-primary);
1409 }
1410
1411 zen-menubar > [role="menu"] {
1412 position: absolute;
1413 inset-block-start: calc(100% + var(--zenbu-sys-space-icon-label));
1414 }
1415
1416 zen-data-table,
1417 zen-table {
1418 display: block;
1419 max-width: 100%;
1420 overflow: auto;
1421 }
1422
1423 :where(zen-data-table, zen-table) table {
1424 width: 100%;
1425 border-collapse: collapse;
1426 background: var(--zenbu-sys-color-surface-default);
1427 }
1428
1429 :where(zen-data-table, zen-table) :where(th, td) {
1430 padding: var(--zenbu-sys-space-control);
1431 border-block-end: 1px solid color-mix(
1432 in srgb,
1433 var(--zenbu-sys-color-border-default) 30%,
1434 transparent
1435 );
1436 text-align: start;
1437 }
1438
1439 :where(zen-data-table, zen-table) th {
1440 font-size: var(--zenbu-sys-font-size-sm);
1441 }
1442
1443 zen-data-table [data-zen-sort] {
1444 padding: 0;
1445 border: 0;
1446 background: transparent;
1447 color: inherit;
1448 font-weight: 850;
1449 cursor: pointer;
1450 }
1451
1452 zen-direction {
1453 display: contents;
1454 }
1455
1456 zen-empty {
1457 display: grid;
1458 justify-items: center;
1459 gap: var(--zenbu-sys-space-related);
1460 padding: var(--zenbu-sys-space-section) var(--zenbu-sys-space-container);
1461 border: var(--zenbu-sys-stroke-width-emphasis) dashed var(--zenbu-sys-color-border-default);
1462 border-radius: var(--zenbu-sys-radius-container);
1463 background: var(--zenbu-sys-color-surface-default);
1464 text-align: center;
1465 }
1466
1467 zen-empty > p {
1468 max-width: 34rem;
1469 margin: 0;
1470 color: var(--zenbu-sys-color-text-secondary);
1471 }
1472
1473 zen-form form {
1474 display: grid;
1475 max-width: 34rem;
1476 gap: var(--zenbu-sys-space-group);
1477 }
1478
1479 zen-form[data-invalid] form {
1480 padding-inline-start: var(--zenbu-sys-space-control);
1481 border-inline-start: 0.35rem solid var(--zenbu-sys-color-danger-foreground);
1482 }
1483
1484 :where(zen-hover-card, zen-tooltip, zen-popover) {
1485 position: relative;
1486 display: inline-block;
1487 }
1488
1489 :where(zen-hover-card, zen-tooltip, zen-popover) [data-zen-content] {
1490 position: absolute;
1491 z-index: 30;
1492 inset-block-start: calc(100% + var(--zenbu-sys-space-related));
1493 inset-inline-start: 0;
1494 width: max-content;
1495 max-width: min(22rem, calc(100vi - 2rem));
1496 padding: var(--zenbu-sys-space-control);
1497 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1498 border-radius: var(--zenbu-sys-radius-control);
1499 box-shadow: var(--zenbu-sys-shadow-raised);
1500 background: var(--zenbu-sys-color-surface-raised);
1501 color: var(--zenbu-sys-color-text-primary);
1502 }
1503
1504 :where(zen-hover-card, zen-tooltip, zen-popover) [data-zen-content][hidden] {
1505 display: none;
1506 }
1507
1508 zen-tooltip [data-zen-content] {
1509 padding: var(--zenbu-sys-space-icon-label) var(--zenbu-sys-space-related);
1510 background: var(--zenbu-sys-color-border-default);
1511 color: var(--zenbu-sys-color-surface-default);
1512 font-size: var(--zenbu-sys-font-size-xs);
1513 }
1514
1515 zen-input-otp [data-zen-otp-slots] {
1516 display: flex;
1517 gap: var(--zenbu-control-gap);
1518 }
1519
1520 zen-input-otp [data-zen-otp-slots] > span {
1521 display: grid;
1522 width: var(--zenbu-control-height);
1523 height: var(--zenbu-control-height);
1524 place-items: center;
1525 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1526 border-radius: var(--zenbu-sys-radius-control-small);
1527 background: var(--zenbu-sys-color-surface-default);
1528 font-size: var(--zenbu-control-font-size);
1529 font-weight: var(--zenbu-sys-font-weight-strong);
1530 }
1531
1532 zen-item {
1533 display: grid;
1534 grid-template-columns: auto minmax(0, 1fr) auto;
1535 align-items: center;
1536 gap: var(--zenbu-sys-space-control);
1537 padding: var(--zenbu-sys-space-control);
1538 border-block-end: 1px solid color-mix(
1539 in srgb,
1540 var(--zenbu-sys-color-border-default) 28%,
1541 transparent
1542 );
1543 }
1544
1545 zen-kbd {
1546 display: inline-flex;
1547 align-items: center;
1548 gap: var(--zenbu-sys-space-icon-label);
1549 }
1550
1551 zen-kbd kbd {
1552 min-width: 1.75rem;
1553 padding: 0.1rem var(--zenbu-sys-space-icon-label);
1554 border: 1px solid var(--zenbu-sys-color-border-default);
1555 border-block-end-width: 3px;
1556 border-radius: var(--zenbu-sys-radius-control-small);
1557 background: var(--zenbu-sys-color-surface-default);
1558 font: 700 var(--zenbu-sys-font-size-xs)/1.5 var(--zenbu-sys-font-family-code);
1559 text-align: center;
1560 }
1561
1562 zen-label {
1563 display: block;
1564 margin-block-end: var(--zenbu-sys-space-related);
1565 font-weight: 800;
1566 }
1567
1568 zen-marker {
1569 display: flex;
1570 align-items: center;
1571 gap: var(--zenbu-sys-space-related);
1572 color: var(--zenbu-sys-color-text-secondary);
1573 font-size: var(--zenbu-sys-font-size-xs);
1574 text-transform: uppercase;
1575 }
1576
1577 zen-marker::before,
1578 zen-marker::after {
1579 height: 1px;
1580 flex: 1;
1581 background: color-mix(
1582 in srgb,
1583 var(--zenbu-sys-color-border-default) 32%,
1584 transparent
1585 );
1586 content: "";
1587 }
1588
1589 zen-message {
1590 display: grid;
1591 grid-template-columns: auto minmax(0, 1fr);
1592 align-items: start;
1593 gap: var(--zenbu-sys-space-control);
1594 }
1595
1596 zen-message > div {
1597 display: grid;
1598 gap: var(--zenbu-sys-space-icon-label);
1599 }
1600
1601 zen-message-scroller {
1602 position: relative;
1603 display: block;
1604 }
1605
1606 zen-message-scroller [data-zen-viewport] {
1607 max-height: 12rem;
1608 overflow: auto;
1609 padding: var(--zenbu-sys-space-control);
1610 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1611 border-radius: var(--zenbu-sys-radius-control);
1612 background: var(--zenbu-sys-color-surface-default);
1613 }
1614
1615 zen-message-scroller [data-zen-scroll-end] {
1616 position: absolute;
1617 inset-inline-end: var(--zenbu-sys-space-control);
1618 inset-block-end: var(--zenbu-sys-space-control);
1619 }
1620
1621 zen-navigation-menu nav {
1622 display: flex;
1623 align-items: center;
1624 gap: var(--zenbu-sys-space-control);
1625 }
1626
1627 zen-pagination nav {
1628 flex-wrap: wrap;
1629 }
1630
1631 zen-pagination a {
1632 display: inline-grid;
1633 min-width: 2.35rem;
1634 min-height: 2.35rem;
1635 place-items: center;
1636 padding-inline: var(--zenbu-sys-space-related);
1637 border: 1px solid transparent;
1638 border-radius: var(--zenbu-sys-radius-control-small);
1639 text-decoration: none;
1640 }
1641
1642 zen-pagination a[aria-current] {
1643 border-color: var(--zenbu-sys-color-border-default);
1644 background: var(--zenbu-sys-color-action-primary-background);
1645 color: var(--zenbu-sys-color-action-primary-foreground);
1646 }
1647
1648 zen-progress {
1649 display: grid;
1650 gap: var(--zenbu-sys-space-related);
1651 }
1652
1653 zen-progress progress {
1654 appearance: none;
1655 width: 100%;
1656 height: 0.75rem;
1657 overflow: hidden;
1658 border: 0;
1659 border-radius: 999px;
1660 accent-color: var(--zenbu-sys-color-success-foreground);
1661 background: var(--zenbu-sys-color-surface-default);
1662 }
1663
1664 zen-progress progress::-webkit-progress-bar {
1665 background: var(--zenbu-sys-color-surface-subtle);
1666 }
1667
1668 zen-progress progress::-webkit-progress-value {
1669 background: var(--zenbu-sys-color-success-foreground);
1670 }
1671
1672 zen-progress progress::-moz-progress-bar {
1673 background: var(--zenbu-sys-color-success-foreground);
1674 }
1675
1676 zen-resizable {
1677 display: flex;
1678 min-height: 12rem;
1679 overflow: hidden;
1680 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1681 border-radius: var(--zenbu-sys-radius-container);
1682 }
1683
1684 zen-resizable [data-zen-panel] {
1685 min-width: 0;
1686 flex: 1 1 50%;
1687 padding: var(--zenbu-sys-space-group);
1688 background: var(--zenbu-sys-color-surface-default);
1689 }
1690
1691 zen-resizable [data-zen-handle] {
1692 width: 0.65rem;
1693 flex: 0 0 0.65rem;
1694 border-inline: 1px solid var(--zenbu-sys-color-border-default);
1695 background: var(--zenbu-sys-color-action-primary-background);
1696 cursor: col-resize;
1697 }
1698
1699 zen-scroll-area {
1700 display: block;
1701 max-height: 10rem;
1702 overflow: auto;
1703 padding: var(--zenbu-sys-space-control);
1704 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1705 border-radius: var(--zenbu-sys-radius-control);
1706 background: var(--zenbu-sys-color-surface-default);
1707 scrollbar-color: var(--zenbu-sys-color-action-primary-background) transparent;
1708 }
1709
1710 zen-separator {
1711 display: block;
1712 }
1713
1714 zen-separator hr {
1715 margin-block: var(--zenbu-sys-space-group);
1716 border: 0;
1717 border-block-start: 1px solid var(--zenbu-sys-color-border-default);
1718 }
1719
1720 zen-separator[orientation="vertical"] {
1721 display: inline-block;
1722 width: 1px;
1723 min-height: 1.5rem;
1724 background: var(--zenbu-sys-color-border-default);
1725 }
1726
1727 zen-sidebar {
1728 display: grid;
1729 grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
1730 gap: var(--zenbu-sys-space-control);
1731 }
1732
1733 zen-sidebar > [data-zen-sidebar-trigger] {
1734 grid-column: 1 / -1;
1735 justify-self: start;
1736 }
1737
1738 zen-sidebar [data-zen-sidebar-panel] {
1739 padding: var(--zenbu-sys-space-control);
1740 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1741 border-radius: var(--zenbu-sys-radius-container);
1742 background: var(--zenbu-sys-color-surface-default);
1743 }
1744
1745 zen-sidebar [data-zen-sidebar-panel] nav {
1746 display: grid;
1747 gap: var(--zenbu-sys-space-icon-label);
1748 }
1749
1750 zen-sidebar [data-zen-sidebar-panel] a {
1751 padding: var(--zenbu-sys-space-related);
1752 border-radius: var(--zenbu-sys-radius-control-small);
1753 color: inherit;
1754 text-decoration: none;
1755 }
1756
1757 zen-sidebar [data-zen-sidebar-panel] a:hover {
1758 background: var(--zenbu-sys-color-action-primary-background);
1759 color: var(--zenbu-sys-color-action-primary-foreground);
1760 }
1761
1762 zen-skeleton {
1763 --zenbu-skeleton-width: 100%;
1764 display: block;
1765 width: var(--zenbu-skeleton-width, 100%);
1766 height: 1rem;
1767 border-radius: var(--zenbu-sys-radius-control-small);
1768 background:
1769 linear-gradient(
1770 100deg,
1771 color-mix(in srgb, var(--zenbu-sys-color-text-secondary) 18%, transparent) 20%,
1772 color-mix(in srgb, var(--zenbu-sys-color-text-secondary) 8%, transparent) 38%,
1773 color-mix(in srgb, var(--zenbu-sys-color-text-secondary) 18%, transparent) 56%
1774 );
1775 background-size: 200% 100%;
1776 animation: zen-skeleton-shimmer 1.4s linear infinite;
1777 }
1778
1779 zen-skeleton[shape="circle"] {
1780 width: 3rem;
1781 height: 3rem;
1782 border-radius: 50%;
1783 }
1784
1785 zen-slider:not([appearance="plain"]) input {
1786 appearance: none;
1787 width: 100%;
1788 height: 0.5rem;
1789 padding-inline: 0;
1790 border: 0;
1791 border-radius: 999px;
1792 background: var(--zenbu-sys-color-surface-sunken);
1793 cursor: pointer;
1794 }
1795
1796 zen-slider:not([appearance="plain"]) input::-webkit-slider-thumb {
1797 appearance: none;
1798 width: 1.35rem;
1799 height: 1.35rem;
1800 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1801 border-radius: 50%;
1802 box-shadow: var(--zenbu-sys-shadow-subtle);
1803 background: var(--zenbu-sys-color-action-primary-background);
1804 }
1805
1806 zen-slider:not([appearance="plain"]) input::-moz-range-thumb {
1807 width: 1.35rem;
1808 height: 1.35rem;
1809 border: var(--zenbu-sys-stroke-width-emphasis) solid var(--zenbu-sys-color-border-default);
1810 border-radius: 50%;
1811 box-shadow: var(--zenbu-sys-shadow-subtle);
1812 background: var(--zenbu-sys-color-action-primary-background);
1813 }
1814
1815 zen-spinner {
1816 display: inline-block;
1817 width: 1.35rem;
1818 height: 1.35rem;
1819 border: 3px solid color-mix(
1820 in srgb,
1821 var(--zenbu-sys-color-text-secondary) 28%,
1822 transparent
1823 );
1824 border-inline-end-color: var(--zenbu-sys-color-info-foreground);
1825 border-radius: 50%;
1826 animation: zen-element-spin 650ms linear infinite;
1827 }
1828
1829 zen-tabs [role="tablist"] {
1830 display: flex;
1831 width: fit-content;
1832 gap: var(--zenbu-sys-space-icon-label);
1833 padding: var(--zenbu-sys-space-icon-label);
1834 border: 1px solid var(--zenbu-sys-color-border-default);
1835 border-radius: var(--zenbu-sys-radius-control);
1836 background: var(--zenbu-sys-color-surface-default);
1837 }
1838
1839 zen-tabs [role="tab"] {
1840 min-height: 2.25rem;
1841 padding-inline: var(--zenbu-sys-space-control);
1842 border: 0;
1843 border-radius: var(--zenbu-sys-radius-control-small);
1844 background: transparent;
1845 color: var(--zenbu-sys-color-text-primary);
1846 font-weight: 750;
1847 cursor: pointer;
1848 }
1849
1850 zen-tabs [role="tab"][aria-selected="true"] {
1851 background: var(--zenbu-sys-color-action-primary-background);
1852 color: var(--zenbu-sys-color-action-primary-foreground);
1853 }
1854
1855 zen-tabs [role="tabpanel"] {
1856 padding-block: var(--zenbu-sys-space-group);
1857 }
1858
1859 zen-tabs [role="tabpanel"][hidden] {
1860 display: none;
1861 }
1862
1863 :where(zen-toggle, zen-toggle-group) {
1864 display: inline-flex;
1865 }
1866
1867 :where(zen-toggle, zen-toggle-group) > button {
1868 min-height: 2.5rem;
1869 padding-inline: var(--zenbu-sys-space-control);
1870 border: 1px solid transparent;
1871 border-radius: var(--zenbu-sys-radius-control-small);
1872 background: transparent;
1873 color: var(--zenbu-sys-color-text-primary);
1874 font-weight: 750;
1875 cursor: pointer;
1876 }
1877
1878 :where(zen-toggle, zen-toggle-group) > button[aria-pressed="true"] {
1879 border-color: var(--zenbu-sys-color-border-default);
1880 background: var(--zenbu-sys-color-action-primary-background);
1881 color: var(--zenbu-sys-color-action-primary-foreground);
1882 }
1883
1884 zen-typography {
1885 display: block;
1886 max-width: 65ch;
1887 line-height: var(--zenbu-sys-type-body-line-height);
1888 }
1889
1890 zen-typography > :where(h1, h2, h3) {
1891 line-height: 1.15;
1892 text-wrap: balance;
1893 }
1894
1895 zen-typography blockquote {
1896 margin-inline: 0;
1897 padding-inline-start: var(--zenbu-sys-space-group);
1898 border-inline-start: 0.35rem solid var(--zenbu-sys-color-action-primary-background);
1899 color: var(--zenbu-sys-color-text-secondary);
1900 font-style: italic;
1901 }
1902
1903 :where(
1904 button,
1905 summary,
1906 [tabindex]
1907 ):focus-visible {
1908 outline: 3px solid var(--zenbu-sys-color-focus-outer);
1909 outline-offset: 3px;
1910 }
1911
1912 :where(
1913 zen-calendar:not([appearance="plain"]),
1914 zen-checkbox:not([appearance="plain"]),
1915 zen-combobox:not([appearance="plain"]),
1916 zen-command:not([appearance="plain"]),
1917 zen-date-picker:not([appearance="plain"]),
1918 zen-field:not([appearance="plain"]),
1919 zen-form:not([appearance="plain"]),
1920 zen-input:not([appearance="plain"]),
1921 zen-input-group:not([appearance="plain"]),
1922 zen-input-otp:not([appearance="plain"]),
1923 zen-native-select:not([appearance="plain"]),
1924 zen-radio-group:not([appearance="plain"]),
1925 zen-select:not([appearance="plain"]),
1926 zen-slider:not([appearance="plain"]),
1927 zen-switch:not([appearance="plain"]),
1928 zen-textarea:not([appearance="plain"])
1929 ) :where(input, select, textarea):focus-visible {
1930 outline: none;
1931 }
1932
1933 @keyframes zen-element-spin {
1934 to { transform: rotate(1turn); }
1935 }
1936
1937 @keyframes zen-skeleton-shimmer {
1938 to { background-position-x: -200%; }
1939 }
1940
1941 @media (max-width: 640px) {
1942 zen-sidebar {
1943 display: block;
1944 }
1945
1946 zen-sidebar > [data-zen-sidebar-trigger] {
1947 margin-block-end: var(--zenbu-sys-space-related);
1948 }
1949
1950 :where(zen-calendar, zen-date-picker) {
1951 width: 100%;
1952 max-width: 100%;
1953 }
1954
1955 zen-date-picker [data-zen-calendar-panel] {
1956 position: fixed;
1957 inset: auto var(--zenbu-sys-space-control) var(--zenbu-sys-space-control);
1958 width: auto;
1959 max-height: calc(100vb - 2 * var(--zenbu-sys-space-control));
1960 overflow: auto;
1961 transform-origin: bottom center;
1962 }
1963 }
1964
1965 @media (forced-colors: active) {
1966 :where(
1967 zen-aspect-ratio,
1968 zen-attachment,
1969 zen-avatar,
1970 zen-badge,
1971 zen-empty,
1972 zen-resizable,
1973 zen-scroll-area
1974 ) {
1975 border: 1px solid CanvasText;
1976 }
1977 }
1978
1979 @media (prefers-reduced-motion: reduce) {
1980 zen-link[effect="paw"] > a > [data-zen-link-decoration],
1981 zen-link[effect="paw"] > a:hover > [data-zen-link-decoration] {
1982 animation: none;
1983 }
1984
1985 zen-skeleton,
1986 zen-spinner {
1987 animation: none;
1988 }
1989
1990 zen-switch input,
1991 zen-switch input::before,
1992 :where(
1993 zen-accordion,
1994 zen-collapsible
1995 ) details::details-content,
1996 :where(
1997 zen-accordion,
1998 zen-collapsible
1999 ) summary > [data-zen-disclosure-icon] {
2000 transition: none;
2001 }
2002
2003 zen-date-picker [data-zen-calendar-panel] {
2004 animation: none;
2005 }
2006
2007 :where(
2008 zen-alert-dialog,
2009 zen-dialog,
2010 zen-drawer,
2011 zen-sheet
2012 ) dialog[open],
2013 :where(
2014 zen-combobox,
2015 zen-command,
2016 zen-context-menu,
2017 zen-dropdown-menu,
2018 zen-hover-card,
2019 zen-menubar,
2020 zen-navigation-menu,
2021 zen-popover,
2022 zen-tooltip
2023 ) :where(
2024 [data-zen-content],
2025 [role="listbox"],
2026 [role="menu"]
2027 ):not([hidden]) {
2028 animation: none;
2029 }
2030 }