@sigx/zero-daisyui 0.14.0 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/css/components/container.css +1 -0
  2. package/dist/css/components/input.css +9 -0
  3. package/dist/css/components/nav-list.css +7 -0
  4. package/dist/css/index.css +17 -0
  5. package/dist/lynx/components/alert.css +7 -1
  6. package/dist/lynx/components/badge.css +2 -4
  7. package/dist/lynx/components/breadcrumbs.css +30 -21
  8. package/dist/lynx/components/button.css +2 -7
  9. package/dist/lynx/components/card.css +1 -2
  10. package/dist/lynx/components/carousel.css +4 -4
  11. package/dist/lynx/components/chat-log.css +5 -5
  12. package/dist/lynx/components/chat.css +1 -1
  13. package/dist/lynx/components/container.css +3 -2
  14. package/dist/lynx/components/diff.css +1 -1
  15. package/dist/lynx/components/divider.css +10 -10
  16. package/dist/lynx/components/drawer.css +8 -8
  17. package/dist/lynx/components/empty-state.css +1 -1
  18. package/dist/lynx/components/fieldset.css +1 -1
  19. package/dist/lynx/components/grid.css +2 -2
  20. package/dist/lynx/components/kbd.css +2 -3
  21. package/dist/lynx/components/menu.css +20 -1
  22. package/dist/lynx/components/nav-list.css +15 -2
  23. package/dist/lynx/components/navbar.css +9 -5
  24. package/dist/lynx/components/pagination.css +97 -65
  25. package/dist/lynx/components/radial-progress.css +10 -10
  26. package/dist/lynx/components/select.css +1 -2
  27. package/dist/lynx/components/spinner.css +2 -12
  28. package/dist/lynx/components/stack.css +2 -2
  29. package/dist/lynx/components/status.css +10 -20
  30. package/dist/lynx/components/steps.css +114 -22
  31. package/dist/lynx/components/table.css +1 -1
  32. package/dist/lynx/components/tabs.css +1 -1
  33. package/dist/lynx/components/timeline.css +12 -25
  34. package/dist/lynx/components/toast.css +2 -4
  35. package/dist/lynx/components/tree-view.css +31 -4
  36. package/dist/lynx/index.css +407 -249
  37. package/dist/lynx/manifest.json +2 -2
  38. package/dist/manifest.json +1 -1
  39. package/dist/recipes.d.ts.map +1 -1
  40. package/dist/recipes.js +282 -17
  41. package/dist/recipes.js.map +1 -1
  42. package/dist/report.json +548 -31
  43. package/package.json +4 -4
  44. package/src/recipes.ts +287 -17
@@ -9,6 +9,7 @@
9
9
  }
10
10
 
11
11
  [data-scope="container"][data-part="root"] {
12
+ box-sizing: border-box;
12
13
  inline-size: 100%;
13
14
  max-inline-size: var(--l-measure);
14
15
  margin-inline: auto;
@@ -76,6 +76,15 @@
76
76
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
77
77
  }
78
78
 
79
+ [data-scope="input"][data-part="input"]::-webkit-search-cancel-button {
80
+ appearance: none;
81
+ display: none;
82
+ }
83
+
84
+ [data-scope="input"][data-part="input"]::-webkit-search-decoration {
85
+ appearance: none;
86
+ }
87
+
79
88
  [data-scope="input"][data-part="adornment"] {
80
89
  display: inline-flex;
81
90
  align-items: center;
@@ -46,6 +46,13 @@
46
46
  align-items: center;
47
47
  gap: var(--space-sm);
48
48
  text-decoration: none;
49
+ appearance: none;
50
+ background: none;
51
+ border: 0;
52
+ font: inherit;
53
+ text-align: start;
54
+ inline-size: 100%;
55
+ cursor: pointer;
49
56
  color: var(--nav-ink);
50
57
  padding: var(--space-sm) var(--space-lg);
51
58
  border-radius: var(--radius-field);
@@ -447,6 +447,7 @@
447
447
  }
448
448
 
449
449
  [data-scope="container"][data-part="root"] {
450
+ box-sizing: border-box;
450
451
  inline-size: 100%;
451
452
  max-inline-size: var(--l-measure);
452
453
  margin-inline: auto;
@@ -6632,6 +6633,15 @@
6632
6633
  color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
6633
6634
  }
6634
6635
 
6636
+ [data-scope="input"][data-part="input"]::-webkit-search-cancel-button {
6637
+ appearance: none;
6638
+ display: none;
6639
+ }
6640
+
6641
+ [data-scope="input"][data-part="input"]::-webkit-search-decoration {
6642
+ appearance: none;
6643
+ }
6644
+
6635
6645
  [data-scope="input"][data-part="adornment"] {
6636
6646
  display: inline-flex;
6637
6647
  align-items: center;
@@ -9390,6 +9400,13 @@
9390
9400
  align-items: center;
9391
9401
  gap: var(--space-sm);
9392
9402
  text-decoration: none;
9403
+ appearance: none;
9404
+ background: none;
9405
+ border: 0;
9406
+ font: inherit;
9407
+ text-align: start;
9408
+ inline-size: 100%;
9409
+ cursor: pointer;
9393
9410
  color: var(--nav-ink);
9394
9411
  padding: var(--space-sm) var(--space-lg);
9395
9412
  border-radius: var(--radius-field);
@@ -54,7 +54,7 @@
54
54
  background: transparent;
55
55
  color: var(--color-base-content);
56
56
  border-radius: var(--radius-selector);
57
- padding: var(--space-2xs);
57
+ padding: 0;
58
58
  line-height: var(--leading-none);
59
59
  cursor: pointer;
60
60
  transition: background var(--duration-fast) var(--ease-standard);
@@ -62,6 +62,12 @@
62
62
  top: calc(var(--alert-pad-y) - var(--space-2xs));
63
63
  right: calc(var(--alert-pad-x) - var(--space-2xs));
64
64
  font-size: var(--text-md);
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ box-sizing: border-box;
69
+ width: calc(var(--text-md) + var(--space-2xs) * 2);
70
+ height: calc(var(--text-md) + var(--space-2xs) * 2);
65
71
  }
66
72
 
67
73
  .zx-alert__close.zx-f-disabled {
@@ -52,14 +52,12 @@
52
52
  .zx-badge__dot {
53
53
  display: flex;
54
54
  flex: none;
55
- inline-size: 0.5em;
56
- block-size: 0.5em;
55
+ width: 0.5em;
56
+ height: 0.5em;
57
57
  box-sizing: border-box;
58
58
  border-radius: 50%;
59
59
  background: var(--badge-dot);
60
60
  border: 0 solid transparent;
61
- width: 0.5em;
62
- height: 0.5em;
63
61
  flex-shrink: 0;
64
62
  border-top-width: 0.1em;
65
63
  border-right-width: 0.1em;
@@ -2,6 +2,26 @@
2
2
  --bc-accent: var(--color-base-content);
3
3
  }
4
4
 
5
+ .zx-root .zx-breadcrumbs__root {
6
+ --bc-trigger-ink: #18181bbf;
7
+ }
8
+
9
+ .zx-root.zx-theme-dark .zx-breadcrumbs__root {
10
+ --bc-trigger-ink: #ecf9ffbf;
11
+ }
12
+
13
+ .zx-root.zx-theme-dim .zx-breadcrumbs__root {
14
+ --bc-trigger-ink: #b2ccd6bf;
15
+ }
16
+
17
+ .zx-root.zx-theme-nord .zx-breadcrumbs__root {
18
+ --bc-trigger-ink: #2e3440bf;
19
+ }
20
+
21
+ .zx-root.zx-theme-sunset .zx-breadcrumbs__root {
22
+ --bc-trigger-ink: #9fb9d0bf;
23
+ }
24
+
5
25
  .zx-breadcrumbs__root {
6
26
  font-size: var(--text-sm);
7
27
  color: var(--color-base-content);
@@ -15,12 +35,14 @@
15
35
  list-style: none;
16
36
  margin: 0;
17
37
  padding: var(--space-xs) 0;
38
+ flex-direction: row;
18
39
  }
19
40
 
20
41
  .zx-breadcrumbs__item {
21
42
  display: flex;
22
43
  align-items: center;
23
44
  gap: var(--space-xs);
45
+ flex-direction: row;
24
46
  }
25
47
 
26
48
  .zx-breadcrumbs__link {
@@ -88,6 +110,7 @@
88
110
  display: flex;
89
111
  align-items: center;
90
112
  gap: var(--space-xs);
113
+ flex-direction: row;
91
114
  }
92
115
 
93
116
  .zx-breadcrumbs__ellipsis-trigger {
@@ -98,34 +121,20 @@
98
121
  margin: 0;
99
122
  font: inherit;
100
123
  line-height: inherit;
124
+ color: var(--bc-trigger-ink);
101
125
  border-radius: var(--radius-selector);
102
126
  cursor: pointer;
103
127
  transition: color var(--duration-fast) var(--ease-standard);
104
128
  }
105
129
 
106
- .zx-root .zx-breadcrumbs__ellipsis-trigger {
107
- color: #18181bbf;
108
- }
109
-
110
- .zx-root.zx-theme-dark .zx-breadcrumbs__ellipsis-trigger {
111
- color: #ecf9ffbf;
112
- }
113
-
114
- .zx-root.zx-theme-dim .zx-breadcrumbs__ellipsis-trigger {
115
- color: #b2ccd6bf;
116
- }
117
-
118
- .zx-root.zx-theme-nord .zx-breadcrumbs__ellipsis-trigger {
119
- color: #2e3440bf;
120
- }
121
-
122
- .zx-root.zx-theme-sunset .zx-breadcrumbs__ellipsis-trigger {
123
- color: #9fb9d0bf;
124
- }
125
-
126
130
  .zx-breadcrumbs__ellipsis-trigger.zx-f-focus-visible {
127
- outline: 2px solid var(--color-primary);
131
+ outline: none;
128
132
  outline-offset: 2px;
133
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-primary);
134
+ }
135
+
136
+ .zx-breadcrumbs__ellipsis-trigger.zx-f-pressed {
137
+ color: var(--color-base-content);
129
138
  }
130
139
 
131
140
  .zx-root .zx-breadcrumbs__root.zx-a-color-primary {
@@ -26,15 +26,13 @@
26
26
 
27
27
  .zx-button__spinner {
28
28
  box-sizing: border-box;
29
- inline-size: 1em;
30
- block-size: 1em;
29
+ width: 1em;
30
+ height: 1em;
31
31
  flex: none;
32
32
  border-radius: 9999px;
33
33
  border: 0 solid transparent;
34
34
  border-block-start-color: transparent;
35
35
  animation: zero-daisyui-btn-spin 0.7s linear infinite;
36
- width: 1em;
37
- height: 1em;
38
36
  border-top-width: calc(var(--border) * 2);
39
37
  border-right-width: calc(var(--border) * 2);
40
38
  border-bottom-width: calc(var(--border) * 2);
@@ -446,14 +444,11 @@
446
444
  }
447
445
 
448
446
  .zx-button__root.zx-m-wide {
449
- inline-size: 100%;
450
- max-inline-size: 256px;
451
447
  width: 100%;
452
448
  max-width: 256px;
453
449
  }
454
450
 
455
451
  .zx-button__root.zx-m-block {
456
- inline-size: 100%;
457
452
  width: 100%;
458
453
  }
459
454
 
@@ -17,9 +17,8 @@
17
17
  align-items: center;
18
18
  justify-content: center;
19
19
  margin: 0;
20
- inline-size: 100%;
21
- object-fit: cover;
22
20
  width: 100%;
21
+ object-fit: cover;
23
22
  overflow: hidden;
24
23
  }
25
24
 
@@ -27,8 +27,8 @@
27
27
  .zx-carousel__prev-trigger {
28
28
  appearance: none;
29
29
  position: absolute;
30
- inline-size: var(--carousel-nav);
31
- block-size: var(--carousel-nav);
30
+ width: var(--carousel-nav);
31
+ height: var(--carousel-nav);
32
32
  display: grid;
33
33
  place-items: center;
34
34
  font-size: var(--text-sm);
@@ -56,8 +56,8 @@
56
56
  .zx-carousel__next-trigger {
57
57
  appearance: none;
58
58
  position: absolute;
59
- inline-size: var(--carousel-nav);
60
- block-size: var(--carousel-nav);
59
+ width: var(--carousel-nav);
60
+ height: var(--carousel-nav);
61
61
  display: grid;
62
62
  place-items: center;
63
63
  font-size: var(--text-sm);
@@ -30,7 +30,7 @@
30
30
  position: sticky;
31
31
  align-self: center;
32
32
  flex: none;
33
- block-size: calc(var(--size-field) * 8);
33
+ height: calc(var(--size-field) * 8);
34
34
  appearance: none;
35
35
  display: flex;
36
36
  align-items: center;
@@ -49,19 +49,19 @@
49
49
  }
50
50
 
51
51
  .zx-chat-log__jump-trigger.zx-a-size-xs {
52
- block-size: calc(var(--size-field) * 6);
52
+ height: calc(var(--size-field) * 6);
53
53
  }
54
54
 
55
55
  .zx-chat-log__jump-trigger.zx-a-size-sm {
56
- block-size: calc(var(--size-field) * 7);
56
+ height: calc(var(--size-field) * 7);
57
57
  }
58
58
 
59
59
  .zx-chat-log__jump-trigger.zx-a-size-lg {
60
- block-size: calc(var(--size-field) * 9);
60
+ height: calc(var(--size-field) * 9);
61
61
  }
62
62
 
63
63
  .zx-chat-log__jump-trigger.zx-a-size-xl {
64
- block-size: calc(var(--size-field) * 10);
64
+ height: calc(var(--size-field) * 10);
65
65
  }
66
66
 
67
67
  .zx-chat-log__jump-trigger.zx-f-focus-visible {
@@ -53,7 +53,7 @@
53
53
  }
54
54
 
55
55
  .zx-chat__bubble {
56
- max-inline-size: 90%;
56
+ max-width: 90%;
57
57
  padding: var(--space-xs) var(--space-lg);
58
58
  font-size: var(--text-sm);
59
59
  background: var(--chat-fill);
@@ -6,6 +6,7 @@
6
6
  }
7
7
 
8
8
  .zx-container__root {
9
- inline-size: 100%;
10
- max-inline-size: var(--l-measure);
9
+ box-sizing: border-box;
10
+ width: 100%;
11
+ max-width: var(--l-measure);
11
12
  }
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  .zx-diff__handle {
28
- inline-size: var(--diff-hit);
28
+ width: var(--diff-hit);
29
29
  display: grid;
30
30
  place-items: center;
31
31
  cursor: ew-resize;
@@ -12,30 +12,30 @@
12
12
  }
13
13
 
14
14
  .zx-divider__root.zx-o-horizontal {
15
- inline-size: 100%;
16
- block-size: var(--border);
15
+ width: 100%;
16
+ height: var(--border);
17
17
  }
18
18
 
19
19
  .zx-divider__root.zx-o-horizontal.zx-a-size-lg {
20
- block-size: calc(var(--border) * 2);
20
+ height: calc(var(--border) * 2);
21
21
  }
22
22
 
23
23
  .zx-divider__root.zx-o-horizontal.zx-a-size-xl {
24
- block-size: calc(var(--border) * 3);
24
+ height: calc(var(--border) * 3);
25
25
  }
26
26
 
27
27
  .zx-divider__root.zx-o-vertical {
28
28
  flex-direction: column;
29
- min-block-size: 1em;
30
- inline-size: var(--border);
29
+ min-height: 1em;
30
+ width: var(--border);
31
31
  }
32
32
 
33
33
  .zx-divider__root.zx-o-vertical.zx-a-size-lg {
34
- inline-size: calc(var(--border) * 2);
34
+ width: calc(var(--border) * 2);
35
35
  }
36
36
 
37
37
  .zx-divider__root.zx-o-vertical.zx-a-size-xl {
38
- inline-size: calc(var(--border) * 3);
38
+ width: calc(var(--border) * 3);
39
39
  }
40
40
 
41
41
  .zx-divider__label {
@@ -106,10 +106,10 @@
106
106
  }
107
107
  .zx-divider__root.zx-m-labelled.zx-o-horizontal {
108
108
  flex-direction: row;
109
- block-size: var(--divider-fit);
109
+ height: var(--divider-fit);
110
110
  }
111
111
  .zx-divider__root.zx-m-labelled.zx-o-vertical {
112
- inline-size: var(--divider-fit);
112
+ width: var(--divider-fit);
113
113
  }
114
114
  .zx-divider__root.zx-m-segment {
115
115
  flex: 1 1 0;
@@ -40,8 +40,8 @@
40
40
  border-radius: var(--radius-box);
41
41
  box-shadow: var(--shadow-xl);
42
42
  box-sizing: border-box;
43
- inline-size: 100%;
44
- max-inline-size: var(--l-measure);
43
+ width: 100%;
44
+ max-width: var(--l-measure);
45
45
  }
46
46
 
47
47
  .zx-drawer__panel.zx-s-open {
@@ -65,8 +65,8 @@
65
65
  opacity: 1;
66
66
  transition: translate var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard), display var(--duration-slow) allow-discrete, overlay var(--duration-slow) allow-discrete;
67
67
  position: fixed;
68
- block-size: 100dvh;
69
- max-block-size: 100dvh;
68
+ height: 100dvh;
69
+ max-height: 100dvh;
70
70
  margin: 0;
71
71
  border-radius: 0;
72
72
  }
@@ -76,15 +76,15 @@
76
76
  }
77
77
 
78
78
  .zx-drawer__panel.zx-p-top.zx-l-dock-sheet {
79
- block-size: auto;
80
- max-block-size: 85dvh;
79
+ height: auto;
80
+ max-height: 85dvh;
81
81
  border-end-start-radius: var(--radius-box);
82
82
  border-end-end-radius: var(--radius-box);
83
83
  }
84
84
 
85
85
  .zx-drawer__panel.zx-p-bottom.zx-l-dock-sheet {
86
- block-size: auto;
87
- max-block-size: 85dvh;
86
+ height: auto;
87
+ max-height: 85dvh;
88
88
  border-start-start-radius: var(--radius-box);
89
89
  border-start-end-radius: var(--radius-box);
90
90
  }
@@ -52,7 +52,7 @@
52
52
  }
53
53
 
54
54
  .zx-empty-state__description {
55
- max-inline-size: 100%;
55
+ max-width: 100%;
56
56
  font-size: var(--text-sm);
57
57
  line-height: var(--leading-normal);
58
58
  text-align: center;
@@ -7,7 +7,7 @@
7
7
  grid-template-columns: 1fr;
8
8
  grid-auto-rows: max-content;
9
9
  gap: var(--space-sm);
10
- min-inline-size: 0;
10
+ min-width: 0;
11
11
  margin: 0;
12
12
  border: none;
13
13
  flex-direction: column;
@@ -13,7 +13,7 @@
13
13
 
14
14
  .zx-grid__root {
15
15
  display: grid;
16
- min-inline-size: 0;
16
+ min-width: 0;
17
17
  grid-template-columns: var(--l-cols);
18
18
  column-gap: var(--l-gap-x);
19
19
  row-gap: var(--l-gap-y);
@@ -24,5 +24,5 @@
24
24
  .zx-grid__cell {
25
25
  --l-span: auto;
26
26
  grid-column: var(--l-span);
27
- min-inline-size: 0;
27
+ min-width: 0;
28
28
  }
@@ -7,7 +7,7 @@
7
7
  display: flex;
8
8
  align-items: center;
9
9
  justify-content: center;
10
- min-inline-size: 1.75em;
10
+ min-width: 1.75em;
11
11
  padding: calc(var(--space-2xs) - var(--border)) calc(var(--space-md) - var(--border));
12
12
  background: var(--kbd-fill);
13
13
  color: var(--kbd-ink);
@@ -22,7 +22,6 @@
22
22
  flex-shrink: 0;
23
23
  flex-wrap: nowrap;
24
24
  flex-direction: row;
25
- min-width: 1.75em;
26
25
  border-top-width: var(--border);
27
26
  border-right-width: var(--border);
28
27
  border-left-width: var(--border);
@@ -31,6 +30,7 @@
31
30
  border-right-color: var(--color-base-300);
32
31
  border-bottom-color: var(--color-base-300);
33
32
  border-left-color: var(--color-base-300);
33
+ font-family: Menlo, monospace;
34
34
  }
35
35
 
36
36
  .zx-kbd__root.zx-a-color-primary {
@@ -76,7 +76,6 @@
76
76
  .zx-kbd__root.zx-a-size-xs {
77
77
  font-size: var(--text-xs);
78
78
  padding: 0 var(--space-xs);
79
- min-inline-size: 1.5em;
80
79
  min-width: 1.5em;
81
80
  }
82
81
 
@@ -16,6 +16,10 @@
16
16
  transition: background var(--duration-normal) var(--ease-standard);
17
17
  padding-left: calc(var(--size-field) * 4);
18
18
  padding-right: calc(var(--size-field) * 4);
19
+ width: max-content;
20
+ flex-shrink: 0;
21
+ flex-wrap: nowrap;
22
+ flex-direction: row;
19
23
  }
20
24
 
21
25
  .zx-menu__trigger.zx-f-disabled {
@@ -28,8 +32,15 @@
28
32
  }
29
33
 
30
34
  .zx-menu__trigger.zx-f-focus-visible {
31
- outline: 2px solid var(--color-base-content);
35
+ outline: none;
32
36
  outline-offset: 2px;
37
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
38
+ }
39
+
40
+ .zx-menu__trigger.zx-f-pressed {
41
+ background: var(--color-base-300);
42
+ transform: translateY(1px);
43
+ box-shadow: none;
33
44
  }
34
45
 
35
46
  .zx-menu__popup {
@@ -43,6 +54,8 @@
43
54
  box-shadow: var(--shadow-lg);
44
55
  padding: var(--space-md);
45
56
  min-width: 208px;
57
+ display: flex;
58
+ flex-direction: column;
46
59
  }
47
60
 
48
61
  .zx-menu__popup.zx-s-open {
@@ -61,6 +74,7 @@
61
74
  cursor: pointer;
62
75
  outline: none;
63
76
  transition: background var(--duration-fast) var(--ease-standard);
77
+ flex-direction: row;
64
78
  }
65
79
 
66
80
  .zx-menu__item.zx-f-highlighted {
@@ -83,6 +97,7 @@
83
97
  cursor: pointer;
84
98
  outline: none;
85
99
  transition: background var(--duration-fast) var(--ease-standard);
100
+ flex-direction: row;
86
101
  }
87
102
 
88
103
  .zx-menu__checkbox-item.zx-f-highlighted {
@@ -105,6 +120,7 @@
105
120
  cursor: pointer;
106
121
  outline: none;
107
122
  transition: background var(--duration-fast) var(--ease-standard);
123
+ flex-direction: row;
108
124
  }
109
125
 
110
126
  .zx-menu__radio-item.zx-f-highlighted {
@@ -134,6 +150,7 @@
134
150
  cursor: pointer;
135
151
  outline: none;
136
152
  transition: background var(--duration-fast) var(--ease-standard);
153
+ flex-direction: row;
137
154
  }
138
155
 
139
156
  .zx-menu__sub-trigger.zx-f-highlighted {
@@ -160,6 +177,8 @@
160
177
  box-shadow: var(--shadow-lg);
161
178
  padding: var(--space-md);
162
179
  min-width: 208px;
180
+ display: flex;
181
+ flex-direction: column;
163
182
  }
164
183
 
165
184
  .zx-menu__sub-popup.zx-s-open {
@@ -35,7 +35,8 @@
35
35
  }
36
36
 
37
37
  .zx-nav-list__item {
38
- display: block;
38
+ display: flex;
39
+ flex-direction: column;
39
40
  }
40
41
 
41
42
  .zx-nav-list__link {
@@ -43,12 +44,20 @@
43
44
  align-items: center;
44
45
  gap: var(--space-sm);
45
46
  text-decoration: none;
47
+ appearance: none;
48
+ background: none;
49
+ border: 0;
50
+ font: inherit;
51
+ text-align: start;
52
+ width: 100%;
53
+ cursor: pointer;
46
54
  color: var(--nav-ink);
47
55
  padding: var(--space-sm) var(--space-lg);
48
56
  border-radius: var(--radius-field);
49
57
  font-weight: var(--weight-medium);
50
58
  line-height: var(--leading-tight);
51
59
  transition: background var(--duration-fast) var(--ease-standard);
60
+ flex-direction: row;
52
61
  }
53
62
 
54
63
  .zx-nav-list__link.zx-s-active {
@@ -63,10 +72,12 @@
63
72
 
64
73
  .zx-nav-list__icon {
65
74
  display: flex;
66
- inline-size: 1.25em;
75
+ width: 1.25em;
67
76
  justify-content: center;
68
77
  flex: none;
69
78
  line-height: var(--leading-none);
79
+ flex-direction: row;
80
+ align-items: center;
70
81
  }
71
82
 
72
83
  .zx-nav-list__meta {
@@ -75,6 +86,8 @@
75
86
  font-size: var(--text-xs);
76
87
  font-variant-numeric: tabular-nums;
77
88
  opacity: 0.7;
89
+ margin-left: auto;
90
+ flex-direction: row;
78
91
  }
79
92
 
80
93
  .zx-nav-list__root.zx-a-color-primary {
@@ -2,10 +2,11 @@
2
2
  display: flex;
3
3
  align-items: center;
4
4
  gap: var(--space-sm);
5
- min-block-size: 64px;
5
+ min-height: 64px;
6
6
  padding: var(--space-sm);
7
7
  background: var(--color-base-100);
8
8
  color: var(--color-base-content);
9
+ flex-direction: row;
9
10
  }
10
11
 
11
12
  .zx-navbar__start {
@@ -14,6 +15,7 @@
14
15
  gap: var(--space-sm);
15
16
  flex: 1 1 0%;
16
17
  justify-content: flex-start;
18
+ flex-direction: row;
17
19
  }
18
20
 
19
21
  .zx-navbar__center {
@@ -21,6 +23,7 @@
21
23
  align-items: center;
22
24
  gap: var(--space-sm);
23
25
  justify-content: center;
26
+ flex-direction: row;
24
27
  }
25
28
 
26
29
  .zx-navbar__end {
@@ -29,6 +32,7 @@
29
32
  gap: var(--space-sm);
30
33
  flex: 1 1 0%;
31
34
  justify-content: flex-end;
35
+ flex-direction: row;
32
36
  }
33
37
 
34
38
  .zx-navbar__root.zx-a-color-primary {
@@ -72,20 +76,20 @@
72
76
  }
73
77
 
74
78
  .zx-navbar__root.zx-a-size-xs {
75
- min-block-size: 40px;
79
+ min-height: 40px;
76
80
  font-size: var(--text-sm);
77
81
  }
78
82
 
79
83
  .zx-navbar__root.zx-a-size-sm {
80
- min-block-size: 48px;
84
+ min-height: 48px;
81
85
  font-size: var(--text-sm);
82
86
  }
83
87
 
84
88
  .zx-navbar__root.zx-a-size-lg {
85
- min-block-size: 80px;
89
+ min-height: 80px;
86
90
  }
87
91
 
88
92
  .zx-navbar__root.zx-a-size-xl {
89
- min-block-size: 96px;
93
+ min-height: 96px;
90
94
  font-size: var(--text-lg);
91
95
  }