@sigx/zero-daisyui 0.12.0 → 0.14.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.
@@ -87,7 +87,6 @@
87
87
  --depth-shade: #0000001a;
88
88
  --depth-sheen: #ffffff1a;
89
89
  --noise: 0;
90
- --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
91
90
  }
92
91
 
93
92
  .zx-root.zx-theme-light {
@@ -164,7 +163,6 @@
164
163
  --depth-shade: #0000001a;
165
164
  --depth-sheen: #ffffff1a;
166
165
  --noise: 0;
167
- --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
168
166
  }
169
167
 
170
168
  .zx-root.zx-theme-dark {
@@ -241,7 +239,6 @@
241
239
  --depth-shade: #0000001a;
242
240
  --depth-sheen: #ffffff1a;
243
241
  --noise: 0;
244
- --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
245
242
  }
246
243
 
247
244
  .zx-root.zx-theme-dim {
@@ -318,7 +315,6 @@
318
315
  --depth-shade: #00000000;
319
316
  --depth-sheen: #ffffff00;
320
317
  --noise: 0;
321
- --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
322
318
  }
323
319
 
324
320
  .zx-root.zx-theme-nord {
@@ -395,7 +391,6 @@
395
391
  --depth-shade: #00000000;
396
392
  --depth-sheen: #ffffff00;
397
393
  --noise: 0;
398
- --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
399
394
  }
400
395
 
401
396
  .zx-root.zx-theme-sunset {
@@ -472,7 +467,6 @@
472
467
  --depth-shade: #00000000;
473
468
  --depth-sheen: #ffffff00;
474
469
  --noise: 0;
475
- --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
476
470
  }
477
471
 
478
472
  .zx-stack__root {
@@ -3512,7 +3506,6 @@
3512
3506
  color: var(--checkbox-on-accent);
3513
3507
  box-shadow: 0 1px var(--depth-shade) inset, 0 0 #0000 inset, 0 0 #0000;
3514
3508
  background-size: auto, calc(var(--noise) * 100%);
3515
- background-image: none, var(--fx-noise);
3516
3509
  cursor: pointer;
3517
3510
  transition: background-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
3518
3511
  }
@@ -3562,27 +3555,59 @@
3562
3555
 
3563
3556
  .zx-checkbox__indicator {
3564
3557
  display: block;
3565
- width: 100%;
3558
+ width: 50%;
3566
3559
  height: 100%;
3567
3560
  opacity: 0;
3568
- background-color: var(--checkbox-on-accent);
3569
- clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
3570
- box-shadow: 0 3px 0 0 var(--depth-sheen) inset;
3561
+ background-color: transparent;
3562
+ box-shadow: none;
3571
3563
  font-size: 16px;
3572
3564
  line-height: 0.75;
3573
- transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), transform var(--duration-slow) var(--ease-standard) var(--duration-instant);
3565
+ transition: opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), transform var(--duration-slow) var(--ease-standard) var(--duration-instant);
3566
+ box-sizing: border-box;
3567
+ margin-left: 20%;
3568
+ border-style: solid;
3569
+ border-color: var(--checkbox-on-accent);
3570
+ border-top-width: 0;
3571
+ border-left-width: 0;
3572
+ border-right-width: calc(((var(--size-selector) * 6) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
3573
+ border-bottom-width: calc(((var(--size-selector) * 6) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
3574
+ transform-origin: 60% 50%;
3574
3575
  transform: rotate(45deg);
3575
3576
  }
3576
3577
 
3578
+ .zx-checkbox__indicator.zx-a-size-xs {
3579
+ border-right-width: calc(((var(--size-selector) * 4) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
3580
+ border-bottom-width: calc(((var(--size-selector) * 4) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
3581
+ }
3582
+
3583
+ .zx-checkbox__indicator.zx-a-size-sm {
3584
+ border-right-width: calc(((var(--size-selector) * 5) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
3585
+ border-bottom-width: calc(((var(--size-selector) * 5) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
3586
+ }
3587
+
3588
+ .zx-checkbox__indicator.zx-a-size-lg {
3589
+ border-right-width: calc(((var(--size-selector) * 7) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
3590
+ border-bottom-width: calc(((var(--size-selector) * 7) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
3591
+ }
3592
+
3593
+ .zx-checkbox__indicator.zx-a-size-xl {
3594
+ border-right-width: calc(((var(--size-selector) * 8) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
3595
+ border-bottom-width: calc(((var(--size-selector) * 8) - var(--checkbox-pad) * 2 - var(--border) * 2) * 0.2);
3596
+ }
3597
+
3577
3598
  .zx-checkbox__indicator.zx-s-checked {
3578
- clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
3579
3599
  opacity: 1;
3580
3600
  }
3581
3601
 
3582
3602
  .zx-checkbox__indicator.zx-s-indeterminate {
3583
- clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
3584
3603
  opacity: 1;
3585
- transform: translateY(-35%) rotate(0deg);
3604
+ width: 60%;
3605
+ height: 20%;
3606
+ align-self: center;
3607
+ border-right-width: 0;
3608
+ border-bottom-width: 0;
3609
+ background-color: var(--checkbox-on-accent);
3610
+ transform: rotate(0deg);
3586
3611
  }
3587
3612
 
3588
3613
  .zx-checkbox__label {
@@ -3982,7 +4007,6 @@
3982
4007
  border-radius: 9999px;
3983
4008
  background-color: transparent;
3984
4009
  background-size: auto, calc(var(--noise) * 100%);
3985
- background-image: none, var(--fx-noise);
3986
4010
  transition: background-color var(--duration-instant) var(--ease-standard);
3987
4011
  }
3988
4012
 
@@ -5944,7 +5968,7 @@
5944
5968
 
5945
5969
  .zx-avatar__root {
5946
5970
  position: relative;
5947
- display: inline-grid;
5971
+ display: flex;
5948
5972
  width: calc(var(--size-selector) * 10);
5949
5973
  height: calc(var(--size-selector) * 10);
5950
5974
  border-radius: 9999px;
@@ -5952,6 +5976,10 @@
5952
5976
  vertical-align: middle;
5953
5977
  background: var(--color-base-200);
5954
5978
  box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--avatar-ring);
5979
+ flex-direction: row;
5980
+ align-items: center;
5981
+ justify-content: center;
5982
+ flex-shrink: 0;
5955
5983
  }
5956
5984
 
5957
5985
  .zx-avatar__root.zx-a-size-xs {
@@ -5979,6 +6007,10 @@
5979
6007
  width: 100%;
5980
6008
  height: 100%;
5981
6009
  object-fit: cover;
6010
+ position: absolute;
6011
+ top: 0;
6012
+ left: 0;
6013
+ border-radius: 9999px;
5982
6014
  }
5983
6015
 
5984
6016
  .zx-avatar__fallback {
@@ -5991,20 +6023,52 @@
5991
6023
  font-size: var(--avatar-text);
5992
6024
  font-weight: var(--weight-semibold);
5993
6025
  user-select: none;
6026
+ position: absolute;
6027
+ top: 0;
6028
+ left: 0;
6029
+ border-radius: 9999px;
6030
+ display: flex;
6031
+ align-items: center;
6032
+ justify-content: center;
6033
+ text-align: center;
5994
6034
  }
5995
6035
 
5996
6036
  .zx-avatar__root.zx-a-shape-circle {
5997
6037
  border-radius: 9999px;
5998
6038
  }
5999
6039
 
6040
+ .zx-avatar__image.zx-a-shape-circle {
6041
+ border-radius: 9999px;
6042
+ }
6043
+
6044
+ .zx-avatar__fallback.zx-a-shape-circle {
6045
+ border-radius: 9999px;
6046
+ }
6047
+
6000
6048
  .zx-avatar__root.zx-a-shape-square {
6001
6049
  border-radius: 0;
6002
6050
  }
6003
6051
 
6052
+ .zx-avatar__image.zx-a-shape-square {
6053
+ border-radius: 0;
6054
+ }
6055
+
6056
+ .zx-avatar__fallback.zx-a-shape-square {
6057
+ border-radius: 0;
6058
+ }
6059
+
6004
6060
  .zx-avatar__root.zx-a-shape-rounded {
6005
6061
  border-radius: var(--radius-selector);
6006
6062
  }
6007
6063
 
6064
+ .zx-avatar__image.zx-a-shape-rounded {
6065
+ border-radius: var(--radius-selector);
6066
+ }
6067
+
6068
+ .zx-avatar__fallback.zx-a-shape-rounded {
6069
+ border-radius: var(--radius-selector);
6070
+ }
6071
+
6008
6072
  .zx-avatar__root.zx-a-color-primary {
6009
6073
  --avatar-ring: var(--color-primary);
6010
6074
  }
@@ -6052,6 +6116,21 @@
6052
6116
  .zx-avatar__root.zx-a-size-xl {
6053
6117
  --avatar-text: var(--text-lg);
6054
6118
  }
6119
+ .zx-avatar__root.zx-m-stacked {
6120
+ margin-left: calc(var(--size-selector) * -2.5);
6121
+ }
6122
+ .zx-avatar__root.zx-m-stacked.zx-a-size-xs {
6123
+ margin-left: calc(var(--size-selector) * -1.5);
6124
+ }
6125
+ .zx-avatar__root.zx-m-stacked.zx-a-size-sm {
6126
+ margin-left: calc(var(--size-selector) * -2);
6127
+ }
6128
+ .zx-avatar__root.zx-m-stacked.zx-a-size-lg {
6129
+ margin-left: calc(var(--size-selector) * -3);
6130
+ }
6131
+ .zx-avatar__root.zx-m-stacked.zx-a-size-xl {
6132
+ margin-left: calc(var(--size-selector) * -4);
6133
+ }
6055
6134
 
6056
6135
  .zx-avatar-group__root {
6057
6136
  --avatar-group-text: var(--text-sm);
@@ -6063,11 +6142,13 @@
6063
6142
  align-items: center;
6064
6143
  vertical-align: middle;
6065
6144
  isolation: isolate;
6145
+ flex-direction: row;
6146
+ width: max-content;
6066
6147
  }
6067
6148
 
6068
6149
  .zx-avatar-group__overflow {
6069
6150
  position: relative;
6070
- display: inline-grid;
6151
+ display: flex;
6071
6152
  place-items: center;
6072
6153
  box-sizing: border-box;
6073
6154
  min-width: calc(var(--size-selector) * 10);
@@ -6081,26 +6162,36 @@
6081
6162
  font-variant-numeric: tabular-nums;
6082
6163
  white-space: nowrap;
6083
6164
  user-select: none;
6165
+ align-items: center;
6166
+ justify-content: center;
6167
+ flex-shrink: 0;
6168
+ padding-left: var(--space-2xs);
6169
+ padding-right: var(--space-2xs);
6170
+ margin-left: calc((var(--size-selector) * 10) * -0.25);
6084
6171
  }
6085
6172
 
6086
6173
  .zx-avatar-group__overflow.zx-a-size-xs {
6087
6174
  min-width: calc(var(--size-selector) * 6);
6088
6175
  height: calc(var(--size-selector) * 6);
6176
+ margin-left: calc((var(--size-selector) * 6) * -0.25);
6089
6177
  }
6090
6178
 
6091
6179
  .zx-avatar-group__overflow.zx-a-size-sm {
6092
6180
  min-width: calc(var(--size-selector) * 8);
6093
6181
  height: calc(var(--size-selector) * 8);
6182
+ margin-left: calc((var(--size-selector) * 8) * -0.25);
6094
6183
  }
6095
6184
 
6096
6185
  .zx-avatar-group__overflow.zx-a-size-lg {
6097
6186
  min-width: calc(var(--size-selector) * 12);
6098
6187
  height: calc(var(--size-selector) * 12);
6188
+ margin-left: calc((var(--size-selector) * 12) * -0.25);
6099
6189
  }
6100
6190
 
6101
6191
  .zx-avatar-group__overflow.zx-a-size-xl {
6102
6192
  min-width: calc(var(--size-selector) * 16);
6103
6193
  height: calc(var(--size-selector) * 16);
6194
+ margin-left: calc((var(--size-selector) * 16) * -0.25);
6104
6195
  }
6105
6196
 
6106
6197
  .zx-avatar-group__root.zx-a-color-primary {
@@ -6262,60 +6353,108 @@
6262
6353
  inline-size: var(--toast-mark);
6263
6354
  block-size: var(--toast-mark);
6264
6355
  box-sizing: border-box;
6356
+ position: absolute;
6357
+ left: var(--space-lg);
6358
+ top: var(--space-md);
6359
+ width: var(--toast-mark);
6360
+ height: var(--toast-mark);
6265
6361
  }
6266
6362
 
6267
6363
  .zx-toast__indicator.zx-s-loading {
6268
6364
  border-radius: 50%;
6365
+ border: 0 solid transparent;
6269
6366
  border-block-start-color: var(--toast-ink);
6270
6367
  animation: zero-daisyui-toast-spin 0.75s linear infinite;
6368
+ border-style: solid;
6369
+ border-top-width: calc(var(--border) * 2);
6370
+ border-right-width: calc(var(--border) * 2);
6371
+ border-bottom-width: calc(var(--border) * 2);
6372
+ border-left-width: calc(var(--border) * 2);
6373
+ border-top-color: var(--toast-ink);
6374
+ }
6375
+
6376
+ .zx-root .zx-toast__indicator.zx-s-loading {
6377
+ border-right-color: #18181b40;
6378
+ border-bottom-color: #18181b40;
6379
+ border-left-color: #18181b40;
6380
+ }
6381
+
6382
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-loading {
6383
+ border-right-color: #ecf9ff40;
6384
+ border-bottom-color: #ecf9ff40;
6385
+ border-left-color: #ecf9ff40;
6386
+ }
6387
+
6388
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-loading {
6389
+ border-right-color: #b2ccd640;
6390
+ border-bottom-color: #b2ccd640;
6391
+ border-left-color: #b2ccd640;
6392
+ }
6393
+
6394
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-loading {
6395
+ border-right-color: #2e344040;
6396
+ border-bottom-color: #2e344040;
6397
+ border-left-color: #2e344040;
6398
+ }
6399
+
6400
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-loading {
6401
+ border-right-color: #9fb9d040;
6402
+ border-bottom-color: #9fb9d040;
6403
+ border-left-color: #9fb9d040;
6271
6404
  }
6272
6405
 
6273
6406
  .zx-toast__indicator.zx-s-complete {
6274
- clip-path: polygon(15.1% 41.3%, 1% 55%, 37.6% 92.8%, 99% 19.8%, 83.9% 7.2%, 36.6% 63.5%);
6407
+ background: transparent;
6408
+ box-sizing: border-box;
6409
+ width: calc(var(--toast-mark) * 0.375);
6410
+ height: calc(var(--toast-mark) * 0.75);
6411
+ margin-left: calc(var(--toast-mark) * 0.3125);
6412
+ border-style: solid;
6413
+ border-top-width: 0;
6414
+ border-left-width: 0;
6415
+ border-right-width: calc(var(--border) * 2);
6416
+ border-bottom-width: calc(var(--border) * 2);
6417
+ transform: rotate(45deg);
6275
6418
  }
6276
6419
 
6277
6420
  .zx-root .zx-toast__indicator.zx-s-complete {
6278
- background: #2a7858;
6421
+ border-color: #2a7858;
6279
6422
  }
6280
6423
 
6281
6424
  .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-complete {
6282
- background: #92e5c2;
6425
+ border-color: #92e5c2;
6283
6426
  }
6284
6427
 
6285
6428
  .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-complete {
6286
- background: #8ee0c9;
6429
+ border-color: #8ee0c9;
6287
6430
  }
6288
6431
 
6289
6432
  .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-complete {
6290
- background: #6b7d6a;
6433
+ border-color: #6b7d6a;
6291
6434
  }
6292
6435
 
6293
6436
  .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-complete {
6294
- background: #a6cebe;
6295
- }
6296
-
6297
- .zx-toast__indicator.zx-s-error {
6298
- clip-path: polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%);
6437
+ border-color: #a6cebe;
6299
6438
  }
6300
6439
 
6301
6440
  .zx-root .zx-toast__indicator.zx-s-error {
6302
- background: #8f424e;
6441
+ background: linear-gradient(45deg, transparent 41%, #8f424e 41%, #8f424e 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #8f424e 41%, #8f424e 59%, transparent 59%);
6303
6442
  }
6304
6443
 
6305
6444
  .zx-root.zx-theme-dark .zx-toast__indicator.zx-s-error {
6306
- background: #ffabb6;
6445
+ background: linear-gradient(45deg, transparent 41%, #ffabb6 41%, #ffabb6 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #ffabb6 41%, #ffabb6 59%, transparent 59%);
6307
6446
  }
6308
6447
 
6309
6448
  .zx-root.zx-theme-dim .zx-toast__indicator.zx-s-error {
6310
- background: #e0bdb6;
6449
+ background: linear-gradient(45deg, transparent 41%, #e0bdb6 41%, #e0bdb6 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #e0bdb6 41%, #e0bdb6 59%, transparent 59%);
6311
6450
  }
6312
6451
 
6313
6452
  .zx-root.zx-theme-nord .zx-toast__indicator.zx-s-error {
6314
- background: #7c4e57;
6453
+ background: linear-gradient(45deg, transparent 41%, #7c4e57 41%, #7c4e57 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #7c4e57 41%, #7c4e57 59%, transparent 59%);
6315
6454
  }
6316
6455
 
6317
6456
  .zx-root.zx-theme-sunset .zx-toast__indicator.zx-s-error {
6318
- background: #d6bbc6;
6457
+ background: linear-gradient(45deg, transparent 41%, #d6bbc6 41%, #d6bbc6 59%, transparent 59%), linear-gradient(-45deg, transparent 41%, #d6bbc6 41%, #d6bbc6 59%, transparent 59%);
6319
6458
  }
6320
6459
 
6321
6460
  .zx-toast__title {
@@ -6388,51 +6527,301 @@
6388
6527
  --toast-ink: var(--color-primary);
6389
6528
  }
6390
6529
 
6530
+ .zx-root .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
6531
+ border-right-color: #422ad540;
6532
+ border-bottom-color: #422ad540;
6533
+ border-left-color: #422ad540;
6534
+ }
6535
+
6536
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
6537
+ border-right-color: #605dff40;
6538
+ border-bottom-color: #605dff40;
6539
+ border-left-color: #605dff40;
6540
+ }
6541
+
6542
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
6543
+ border-right-color: #9fe88d40;
6544
+ border-bottom-color: #9fe88d40;
6545
+ border-left-color: #9fe88d40;
6546
+ }
6547
+
6548
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
6549
+ border-right-color: #5e81ac40;
6550
+ border-bottom-color: #5e81ac40;
6551
+ border-left-color: #5e81ac40;
6552
+ }
6553
+
6554
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-primary.zx-s-loading {
6555
+ border-right-color: #ff865b40;
6556
+ border-bottom-color: #ff865b40;
6557
+ border-left-color: #ff865b40;
6558
+ }
6559
+
6391
6560
  .zx-toast__root.zx-a-color-secondary {
6392
6561
  --toast-bg: var(--color-secondary-soft);
6393
6562
  --toast-ink: var(--color-secondary);
6394
6563
  }
6395
6564
 
6565
+ .zx-root .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
6566
+ border-right-color: #f4309840;
6567
+ border-bottom-color: #f4309840;
6568
+ border-left-color: #f4309840;
6569
+ }
6570
+
6571
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
6572
+ border-right-color: #f4309840;
6573
+ border-bottom-color: #f4309840;
6574
+ border-left-color: #f4309840;
6575
+ }
6576
+
6577
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
6578
+ border-right-color: #ff7d5d40;
6579
+ border-bottom-color: #ff7d5d40;
6580
+ border-left-color: #ff7d5d40;
6581
+ }
6582
+
6583
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
6584
+ border-right-color: #81a1c140;
6585
+ border-bottom-color: #81a1c140;
6586
+ border-left-color: #81a1c140;
6587
+ }
6588
+
6589
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-secondary.zx-s-loading {
6590
+ border-right-color: #fd6f9c40;
6591
+ border-bottom-color: #fd6f9c40;
6592
+ border-left-color: #fd6f9c40;
6593
+ }
6594
+
6396
6595
  .zx-toast__root.zx-a-color-accent {
6397
6596
  --toast-bg: var(--color-accent-soft);
6398
6597
  --toast-ink: var(--color-accent);
6399
6598
  }
6400
6599
 
6600
+ .zx-root .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
6601
+ border-right-color: #00d3bb40;
6602
+ border-bottom-color: #00d3bb40;
6603
+ border-left-color: #00d3bb40;
6604
+ }
6605
+
6606
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
6607
+ border-right-color: #00d3bb40;
6608
+ border-bottom-color: #00d3bb40;
6609
+ border-left-color: #00d3bb40;
6610
+ }
6611
+
6612
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
6613
+ border-right-color: #c792e940;
6614
+ border-bottom-color: #c792e940;
6615
+ border-left-color: #c792e940;
6616
+ }
6617
+
6618
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
6619
+ border-right-color: #88c0d040;
6620
+ border-bottom-color: #88c0d040;
6621
+ border-left-color: #88c0d040;
6622
+ }
6623
+
6624
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-accent.zx-s-loading {
6625
+ border-right-color: #b387fa40;
6626
+ border-bottom-color: #b387fa40;
6627
+ border-left-color: #b387fa40;
6628
+ }
6629
+
6401
6630
  .zx-toast__root.zx-a-color-neutral {
6402
6631
  --toast-bg: var(--color-neutral-soft);
6403
6632
  --toast-ink: var(--color-neutral);
6404
6633
  }
6405
6634
 
6635
+ .zx-root .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
6636
+ border-right-color: #09090b40;
6637
+ border-bottom-color: #09090b40;
6638
+ border-left-color: #09090b40;
6639
+ }
6640
+
6641
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
6642
+ border-right-color: #09090b40;
6643
+ border-bottom-color: #09090b40;
6644
+ border-left-color: #09090b40;
6645
+ }
6646
+
6647
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
6648
+ border-right-color: #1c212b40;
6649
+ border-bottom-color: #1c212b40;
6650
+ border-left-color: #1c212b40;
6651
+ }
6652
+
6653
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
6654
+ border-right-color: #4c566a40;
6655
+ border-bottom-color: #4c566a40;
6656
+ border-left-color: #4c566a40;
6657
+ }
6658
+
6659
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-neutral.zx-s-loading {
6660
+ border-right-color: #1b262c40;
6661
+ border-bottom-color: #1b262c40;
6662
+ border-left-color: #1b262c40;
6663
+ }
6664
+
6406
6665
  .zx-toast__root.zx-a-color-info {
6407
6666
  --toast-bg: var(--color-info-soft);
6408
6667
  --toast-ink: var(--color-info);
6409
6668
  }
6410
6669
 
6670
+ .zx-root .zx-toast__indicator.zx-a-color-info.zx-s-loading {
6671
+ border-right-color: #00bafe40;
6672
+ border-bottom-color: #00bafe40;
6673
+ border-left-color: #00bafe40;
6674
+ }
6675
+
6676
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-info.zx-s-loading {
6677
+ border-right-color: #00bafe40;
6678
+ border-bottom-color: #00bafe40;
6679
+ border-left-color: #00bafe40;
6680
+ }
6681
+
6682
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-info.zx-s-loading {
6683
+ border-right-color: #28ebff40;
6684
+ border-bottom-color: #28ebff40;
6685
+ border-left-color: #28ebff40;
6686
+ }
6687
+
6688
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-info.zx-s-loading {
6689
+ border-right-color: #b48ead40;
6690
+ border-bottom-color: #b48ead40;
6691
+ border-left-color: #b48ead40;
6692
+ }
6693
+
6694
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-info.zx-s-loading {
6695
+ border-right-color: #89e0eb40;
6696
+ border-bottom-color: #89e0eb40;
6697
+ border-left-color: #89e0eb40;
6698
+ }
6699
+
6411
6700
  .zx-toast__root.zx-a-color-success {
6412
6701
  --toast-bg: var(--color-success-soft);
6413
6702
  --toast-ink: var(--color-success);
6414
6703
  }
6415
6704
 
6705
+ .zx-root .zx-toast__indicator.zx-a-color-success.zx-s-loading {
6706
+ border-right-color: #00d39040;
6707
+ border-bottom-color: #00d39040;
6708
+ border-left-color: #00d39040;
6709
+ }
6710
+
6711
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-success.zx-s-loading {
6712
+ border-right-color: #00d39040;
6713
+ border-bottom-color: #00d39040;
6714
+ border-left-color: #00d39040;
6715
+ }
6716
+
6717
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-success.zx-s-loading {
6718
+ border-right-color: #62efbd40;
6719
+ border-bottom-color: #62efbd40;
6720
+ border-left-color: #62efbd40;
6721
+ }
6722
+
6723
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-success.zx-s-loading {
6724
+ border-right-color: #a3be8d40;
6725
+ border-bottom-color: #a3be8d40;
6726
+ border-left-color: #a3be8d40;
6727
+ }
6728
+
6729
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-success.zx-s-loading {
6730
+ border-right-color: #addfad40;
6731
+ border-bottom-color: #addfad40;
6732
+ border-left-color: #addfad40;
6733
+ }
6734
+
6416
6735
  .zx-toast__root.zx-a-color-warning {
6417
6736
  --toast-bg: var(--color-warning-soft);
6418
6737
  --toast-ink: var(--color-warning);
6419
6738
  }
6420
6739
 
6740
+ .zx-root .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
6741
+ border-right-color: #fcb70040;
6742
+ border-bottom-color: #fcb70040;
6743
+ border-left-color: #fcb70040;
6744
+ }
6745
+
6746
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
6747
+ border-right-color: #fcb70040;
6748
+ border-bottom-color: #fcb70040;
6749
+ border-left-color: #fcb70040;
6750
+ }
6751
+
6752
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
6753
+ border-right-color: #efd05740;
6754
+ border-bottom-color: #efd05740;
6755
+ border-left-color: #efd05740;
6756
+ }
6757
+
6758
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
6759
+ border-right-color: #ebcb8b40;
6760
+ border-bottom-color: #ebcb8b40;
6761
+ border-left-color: #ebcb8b40;
6762
+ }
6763
+
6764
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-warning.zx-s-loading {
6765
+ border-right-color: #f1c89240;
6766
+ border-bottom-color: #f1c89240;
6767
+ border-left-color: #f1c89240;
6768
+ }
6769
+
6421
6770
  .zx-toast__root.zx-a-color-error {
6422
6771
  --toast-bg: var(--color-error-soft);
6423
6772
  --toast-ink: var(--color-error);
6424
6773
  }
6425
6774
 
6775
+ .zx-root .zx-toast__indicator.zx-a-color-error.zx-s-loading {
6776
+ border-right-color: #ff627d40;
6777
+ border-bottom-color: #ff627d40;
6778
+ border-left-color: #ff627d40;
6779
+ }
6780
+
6781
+ .zx-root.zx-theme-dark .zx-toast__indicator.zx-a-color-error.zx-s-loading {
6782
+ border-right-color: #ff627d40;
6783
+ border-bottom-color: #ff627d40;
6784
+ border-left-color: #ff627d40;
6785
+ }
6786
+
6787
+ .zx-root.zx-theme-dim .zx-toast__indicator.zx-a-color-error.zx-s-loading {
6788
+ border-right-color: #ffae9b40;
6789
+ border-bottom-color: #ffae9b40;
6790
+ border-left-color: #ffae9b40;
6791
+ }
6792
+
6793
+ .zx-root.zx-theme-nord .zx-toast__indicator.zx-a-color-error.zx-s-loading {
6794
+ border-right-color: #bf616a40;
6795
+ border-bottom-color: #bf616a40;
6796
+ border-left-color: #bf616a40;
6797
+ }
6798
+
6799
+ .zx-root.zx-theme-sunset .zx-toast__indicator.zx-a-color-error.zx-s-loading {
6800
+ border-right-color: #ffbbbd40;
6801
+ border-bottom-color: #ffbbbd40;
6802
+ border-left-color: #ffbbbd40;
6803
+ }
6804
+
6426
6805
  .zx-toast__root.zx-a-size-xs {
6427
6806
  padding: var(--space-xs) var(--space-md);
6428
6807
  font-size: var(--text-xs);
6429
6808
  }
6430
6809
 
6810
+ .zx-toast__indicator.zx-a-size-xs {
6811
+ left: var(--space-md);
6812
+ top: var(--space-xs);
6813
+ }
6814
+
6431
6815
  .zx-toast__root.zx-a-size-sm {
6432
6816
  padding: var(--space-sm) var(--space-md);
6433
6817
  font-size: var(--text-sm);
6434
6818
  }
6435
6819
 
6820
+ .zx-toast__indicator.zx-a-size-sm {
6821
+ left: var(--space-md);
6822
+ top: var(--space-sm);
6823
+ }
6824
+
6436
6825
  .zx-toast__root.zx-a-size-lg {
6437
6826
  padding: var(--space-lg) var(--space-xl);
6438
6827
  font-size: var(--text-md);
@@ -6442,6 +6831,11 @@
6442
6831
  font-size: var(--text-sm);
6443
6832
  }
6444
6833
 
6834
+ .zx-toast__indicator.zx-a-size-lg {
6835
+ left: var(--space-xl);
6836
+ top: var(--space-lg);
6837
+ }
6838
+
6445
6839
  .zx-toast__root.zx-a-size-xl {
6446
6840
  padding: var(--space-xl) var(--space-2xl);
6447
6841
  font-size: var(--text-lg);
@@ -6450,6 +6844,16 @@
6450
6844
  .zx-toast__description.zx-a-size-xl {
6451
6845
  font-size: var(--text-md);
6452
6846
  }
6847
+
6848
+ .zx-toast__indicator.zx-a-size-xl {
6849
+ left: var(--space-2xl);
6850
+ top: var(--space-xl);
6851
+ }
6852
+ .zx-toast__title.zx-m-marked,
6853
+ .zx-toast__description.zx-m-marked,
6854
+ .zx-toast__action.zx-m-marked {
6855
+ margin-left: calc(var(--toast-mark) + var(--space-md));
6856
+ }
6453
6857
  @keyframes zero-daisyui-toast-spin {
6454
6858
  to { transform: rotate(360deg); }
6455
6859
  }
@@ -6469,11 +6873,12 @@
6469
6873
  flex-wrap: wrap;
6470
6874
  min-width: 208px;
6471
6875
  box-sizing: border-box;
6472
- height: calc(var(--size-field) * 12);
6876
+ height: auto;
6473
6877
  background: var(--color-base-100);
6474
6878
  border: var(--border) solid var(--color-base-300);
6475
6879
  border-radius: var(--radius-field);
6476
6880
  box-shadow: var(--shadow-xs);
6881
+ min-height: calc(var(--size-field) * 12);
6477
6882
  transition: border-color var(--duration-fast) var(--ease-standard);
6478
6883
  }
6479
6884
 
@@ -6529,6 +6934,11 @@
6529
6934
  line-height: var(--leading-none);
6530
6935
  }
6531
6936
 
6937
+ .zx-combobox__tag.zx-f-focus-visible {
6938
+ outline: 2px solid var(--color-base-content);
6939
+ outline-offset: 2px;
6940
+ }
6941
+
6532
6942
  .zx-combobox__tag-label {
6533
6943
  white-space: nowrap;
6534
6944
  }
@@ -6941,11 +7351,6 @@
6941
7351
 
6942
7352
  .zx-toggle-group__root.zx-o-vertical {
6943
7353
  flex-direction: column;
6944
- border-top-width: 0;
6945
- }
6946
-
6947
- .zx-toggle-group__root.zx-o-horizontal {
6948
- border-left-width: 0;
6949
7354
  }
6950
7355
 
6951
7356
  .zx-toggle-group__item {
@@ -7063,6 +7468,24 @@
7063
7468
  --toggle-group-accent: var(--color-error);
7064
7469
  --toggle-group-on-accent: var(--color-error-content);
7065
7470
  }
7471
+ .zx-toggle-group__item.zx-m-first.zx-o-horizontal {
7472
+ border-left-width: calc(var(--border) * 0);
7473
+ border-top-left-radius: calc(var(--radius-field) - var(--border));
7474
+ border-bottom-left-radius: calc(var(--radius-field) - var(--border));
7475
+ }
7476
+ .zx-toggle-group__item.zx-m-first.zx-o-vertical {
7477
+ border-top-width: calc(var(--border) * 0);
7478
+ border-top-left-radius: calc(var(--radius-field) - var(--border));
7479
+ border-top-right-radius: calc(var(--radius-field) - var(--border));
7480
+ }
7481
+ .zx-toggle-group__item.zx-m-last.zx-o-horizontal {
7482
+ border-top-right-radius: calc(var(--radius-field) - var(--border));
7483
+ border-bottom-right-radius: calc(var(--radius-field) - var(--border));
7484
+ }
7485
+ .zx-toggle-group__item.zx-m-last.zx-o-vertical {
7486
+ border-bottom-left-radius: calc(var(--radius-field) - var(--border));
7487
+ border-bottom-right-radius: calc(var(--radius-field) - var(--border));
7488
+ }
7066
7489
 
7067
7490
  .zx-number-input__root {
7068
7491
  --number-input-accent: var(--color-base-content);
@@ -7147,6 +7570,26 @@
7147
7570
  flex-grow: 1;
7148
7571
  }
7149
7572
 
7573
+ .zx-root .zx-number-input__input {
7574
+ -x-placeholder-color: #18181b99;
7575
+ }
7576
+
7577
+ .zx-root.zx-theme-dark .zx-number-input__input {
7578
+ -x-placeholder-color: #ecf9ff99;
7579
+ }
7580
+
7581
+ .zx-root.zx-theme-dim .zx-number-input__input {
7582
+ -x-placeholder-color: #b2ccd699;
7583
+ }
7584
+
7585
+ .zx-root.zx-theme-nord .zx-number-input__input {
7586
+ -x-placeholder-color: #2e344099;
7587
+ }
7588
+
7589
+ .zx-root.zx-theme-sunset .zx-number-input__input {
7590
+ -x-placeholder-color: #9fb9d099;
7591
+ }
7592
+
7150
7593
  .zx-number-input__input.zx-f-disabled {
7151
7594
  cursor: not-allowed;
7152
7595
  }
@@ -8196,7 +8639,7 @@
8196
8639
  border-radius: var(--radius-field);
8197
8640
  box-shadow: var(--shadow-xs);
8198
8641
  display: block;
8199
- min-height: calc(calc(var(--size-field) * 12) * 2);
8642
+ min-height: calc(var(--size-field) * 24);
8200
8643
  width: 100%;
8201
8644
  min-width: 0;
8202
8645
  appearance: none;
@@ -8207,6 +8650,7 @@
8207
8650
  padding: var(--space-sm) var(--space-md);
8208
8651
  resize: vertical;
8209
8652
  transition: border-color var(--duration-fast) var(--ease-standard);
8653
+ --textarea-edge: var(--color-base-300);
8210
8654
  }
8211
8655
 
8212
8656
  .zx-root .zx-textarea__textarea {
@@ -8231,6 +8675,7 @@
8231
8675
 
8232
8676
  .zx-textarea__textarea.zx-f-invalid {
8233
8677
  border-color: var(--color-error);
8678
+ --textarea-edge: var(--color-error);
8234
8679
  }
8235
8680
 
8236
8681
  .zx-textarea__textarea.zx-f-disabled {
@@ -8241,7 +8686,8 @@
8241
8686
  .zx-textarea__textarea.zx-f-focus-visible {
8242
8687
  outline: none;
8243
8688
  outline-offset: 2px;
8244
- box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--textarea-accent);
8689
+ border-color: var(--color-base-100);
8690
+ box-shadow: 0 0 0 2px var(--textarea-accent), inset 0 0 0 1px var(--color-base-100), inset 0 0 0 2px var(--textarea-edge);
8245
8691
  }
8246
8692
 
8247
8693
  .zx-textarea__root.zx-a-color-primary {
@@ -8278,25 +8724,25 @@
8278
8724
 
8279
8725
  .zx-textarea__textarea.zx-a-size-xs {
8280
8726
  font-size: var(--text-xs);
8281
- min-height: calc(calc(var(--size-field) * 8) * 2);
8727
+ min-height: calc(var(--size-field) * 16);
8282
8728
  padding: var(--space-2xs) var(--space-xs);
8283
8729
  }
8284
8730
 
8285
8731
  .zx-textarea__textarea.zx-a-size-sm {
8286
8732
  font-size: var(--text-xs);
8287
- min-height: calc(calc(var(--size-field) * 10) * 2);
8733
+ min-height: calc(var(--size-field) * 20);
8288
8734
  padding: var(--space-xs) var(--space-sm);
8289
8735
  }
8290
8736
 
8291
8737
  .zx-textarea__textarea.zx-a-size-lg {
8292
8738
  font-size: var(--text-md);
8293
- min-height: calc(calc(var(--size-field) * 14) * 2);
8739
+ min-height: calc(var(--size-field) * 28);
8294
8740
  padding: var(--space-md) var(--space-lg);
8295
8741
  }
8296
8742
 
8297
8743
  .zx-textarea__textarea.zx-a-size-xl {
8298
8744
  font-size: var(--text-lg);
8299
- min-height: calc(calc(var(--size-field) * 16) * 2);
8745
+ min-height: calc(var(--size-field) * 32);
8300
8746
  padding: var(--space-lg) var(--space-xl);
8301
8747
  }
8302
8748
 
@@ -8311,7 +8757,7 @@
8311
8757
  color: var(--color-base-content);
8312
8758
  border-radius: var(--radius-box);
8313
8759
  box-shadow: var(--shadow-md);
8314
- overflow: hidden;
8760
+ overflow: visible;
8315
8761
  }
8316
8762
 
8317
8763
  .zx-card__media {
@@ -8321,6 +8767,8 @@
8321
8767
  margin: 0;
8322
8768
  inline-size: 100%;
8323
8769
  object-fit: cover;
8770
+ width: 100%;
8771
+ overflow: hidden;
8324
8772
  }
8325
8773
 
8326
8774
  .zx-card__header {
@@ -8374,6 +8822,7 @@
8374
8822
  justify-content: flex-end;
8375
8823
  gap: var(--space-md);
8376
8824
  padding: 0 var(--card-pad) var(--card-pad);
8825
+ flex-direction: row;
8377
8826
  }
8378
8827
 
8379
8828
  .zx-card__root.zx-a-color-primary {
@@ -8423,21 +8872,34 @@
8423
8872
  .zx-card__root.zx-a-size-xl {
8424
8873
  --card-pad: var(--space-2xl);
8425
8874
  }
8875
+ .zx-card__media.zx-m-first {
8876
+ border-top-left-radius: var(--radius-box);
8877
+ border-top-right-radius: var(--radius-box);
8878
+ }
8879
+ .zx-card__media.zx-m-last {
8880
+ border-bottom-left-radius: var(--radius-box);
8881
+ border-bottom-right-radius: var(--radius-box);
8882
+ }
8426
8883
 
8427
8884
  .zx-alert__root {
8428
8885
  --alert-tint: var(--color-info-soft);
8429
8886
  --alert-ink: var(--color-base-content);
8887
+ --alert-pad-y: var(--space-md);
8888
+ --alert-pad-x: var(--space-lg);
8430
8889
  }
8431
8890
 
8432
8891
  .zx-alert__root {
8433
- display: grid;
8892
+ display: flex;
8434
8893
  grid-template-columns: auto 1fr auto;
8435
- align-items: center;
8436
- gap: var(--space-sm) var(--space-md);
8894
+ align-items: stretch;
8895
+ gap: var(--space-sm);
8437
8896
  background: var(--alert-tint);
8438
8897
  color: var(--color-base-content);
8439
8898
  border-radius: var(--radius-box);
8440
- padding: var(--space-md) var(--space-lg);
8899
+ padding: var(--alert-pad-y) var(--alert-pad-x);
8900
+ flex-direction: column;
8901
+ position: relative;
8902
+ box-sizing: border-box;
8441
8903
  }
8442
8904
 
8443
8905
  .zx-alert__icon {
@@ -8447,6 +8909,12 @@
8447
8909
  color: var(--alert-ink);
8448
8910
  font-size: var(--text-lg);
8449
8911
  line-height: var(--leading-none);
8912
+ position: absolute;
8913
+ left: var(--alert-pad-x);
8914
+ top: 0;
8915
+ bottom: 0;
8916
+ width: var(--text-xl);
8917
+ justify-content: center;
8450
8918
  }
8451
8919
 
8452
8920
  .zx-alert__title {
@@ -8467,12 +8935,16 @@
8467
8935
  appearance: none;
8468
8936
  border: none;
8469
8937
  background: transparent;
8470
- color: inherit;
8938
+ color: var(--color-base-content);
8471
8939
  border-radius: var(--radius-selector);
8472
8940
  padding: var(--space-2xs);
8473
8941
  line-height: var(--leading-none);
8474
8942
  cursor: pointer;
8475
8943
  transition: background var(--duration-fast) var(--ease-standard);
8944
+ position: absolute;
8945
+ top: calc(var(--alert-pad-y) - var(--space-2xs));
8946
+ right: calc(var(--alert-pad-x) - var(--space-2xs));
8947
+ font-size: var(--text-md);
8476
8948
  }
8477
8949
 
8478
8950
  .zx-alert__close.zx-f-disabled {
@@ -8481,8 +8953,9 @@
8481
8953
  }
8482
8954
 
8483
8955
  .zx-alert__close.zx-f-focus-visible {
8484
- outline: 2px solid var(--color-base-content);
8956
+ outline: none;
8485
8957
  outline-offset: 2px;
8958
+ box-shadow: 0 0 0 2px var(--alert-tint), 0 0 0 4px var(--color-base-content);
8486
8959
  }
8487
8960
 
8488
8961
  .zx-root .zx-alert__close.zx-f-pressed {
@@ -8699,18 +9172,38 @@
8699
9172
 
8700
9173
  .zx-alert__root.zx-a-size-xs {
8701
9174
  padding: var(--space-2xs) var(--space-sm);
9175
+ --alert-pad-y: var(--space-2xs);
9176
+ --alert-pad-x: var(--space-sm);
8702
9177
  }
8703
9178
 
8704
9179
  .zx-alert__root.zx-a-size-sm {
8705
9180
  padding: var(--space-xs) var(--space-md);
9181
+ --alert-pad-y: var(--space-xs);
9182
+ --alert-pad-x: var(--space-md);
8706
9183
  }
8707
9184
 
8708
9185
  .zx-alert__root.zx-a-size-lg {
8709
9186
  padding: var(--space-lg) var(--space-xl);
9187
+ --alert-pad-y: var(--space-lg);
9188
+ --alert-pad-x: var(--space-xl);
8710
9189
  }
8711
9190
 
8712
9191
  .zx-alert__root.zx-a-size-xl {
8713
9192
  padding: var(--space-xl) var(--space-2xl);
9193
+ --alert-pad-y: var(--space-xl);
9194
+ --alert-pad-x: var(--space-2xl);
9195
+ }
9196
+ .zx-alert__title.zx-m-with-icon {
9197
+ margin-left: calc(var(--text-xl) + var(--space-md));
9198
+ }
9199
+ .zx-alert__description.zx-m-with-icon {
9200
+ margin-left: calc(var(--text-xl) + var(--space-md));
9201
+ }
9202
+ .zx-alert__title.zx-m-with-close {
9203
+ margin-right: calc(var(--text-md) + var(--space-md));
9204
+ }
9205
+ .zx-alert__description.zx-m-with-close {
9206
+ margin-right: calc(var(--text-md) + var(--space-md));
8714
9207
  }
8715
9208
 
8716
9209
  .zx-empty-state__root {
@@ -8754,6 +9247,7 @@
8754
9247
  color: var(--empty-accent);
8755
9248
  font-size: var(--text-2xl);
8756
9249
  line-height: var(--leading-none);
9250
+ margin-bottom: var(--space-xs);
8757
9251
  }
8758
9252
 
8759
9253
  .zx-empty-state__title {
@@ -8761,12 +9255,15 @@
8761
9255
  font-size: var(--text-lg);
8762
9256
  font-weight: var(--weight-bold);
8763
9257
  line-height: var(--leading-tight);
9258
+ color: var(--color-base-content);
9259
+ text-align: center;
8764
9260
  }
8765
9261
 
8766
9262
  .zx-empty-state__description {
8767
- max-inline-size: 36ch;
9263
+ max-inline-size: 100%;
8768
9264
  font-size: var(--text-sm);
8769
9265
  line-height: var(--leading-normal);
9266
+ text-align: center;
8770
9267
  }
8771
9268
 
8772
9269
  .zx-root .zx-empty-state__description {
@@ -8794,6 +9291,8 @@
8794
9291
  flex-wrap: wrap;
8795
9292
  justify-content: center;
8796
9293
  gap: var(--space-sm);
9294
+ flex-direction: row;
9295
+ margin-top: var(--space-sm);
8797
9296
  }
8798
9297
 
8799
9298
  .zx-empty-state__root.zx-a-color-primary {
@@ -9057,17 +9556,39 @@
9057
9556
  }
9058
9557
 
9059
9558
  .zx-badge__root {
9559
+ --badge-dot: var(--badge-ink);
9560
+ --badge-dot-ring: var(--badge-ink);
9060
9561
  --badge-fill: var(--color-base-200);
9061
9562
  --badge-ink: var(--color-base-content);
9062
9563
  }
9063
9564
 
9064
- .zx-badge__root {
9065
- display: flex;
9066
- align-items: center;
9067
- gap: 0.375em;
9068
- background: var(--badge-fill);
9565
+ .zx-root .zx-badge__root {
9566
+ --badge-dot-halo: #18181b59;
9567
+ }
9568
+
9569
+ .zx-root.zx-theme-dark .zx-badge__root {
9570
+ --badge-dot-halo: #ecf9ff59;
9571
+ }
9572
+
9573
+ .zx-root.zx-theme-dim .zx-badge__root {
9574
+ --badge-dot-halo: #b2ccd659;
9575
+ }
9576
+
9577
+ .zx-root.zx-theme-nord .zx-badge__root {
9578
+ --badge-dot-halo: #2e344059;
9579
+ }
9580
+
9581
+ .zx-root.zx-theme-sunset .zx-badge__root {
9582
+ --badge-dot-halo: #9fb9d059;
9583
+ }
9584
+
9585
+ .zx-badge__root {
9586
+ display: flex;
9587
+ align-items: center;
9588
+ gap: 0.375em;
9589
+ background: var(--badge-fill);
9069
9590
  color: var(--badge-ink);
9070
- border: var(--border) solid transparent;
9591
+ border: 0 solid transparent;
9071
9592
  border-radius: var(--radius-selector);
9072
9593
  padding: var(--space-2xs) var(--space-lg);
9073
9594
  font-size: var(--text-xs);
@@ -9075,21 +9596,41 @@
9075
9596
  line-height: var(--leading-normal);
9076
9597
  white-space: nowrap;
9077
9598
  text-decoration: none;
9599
+ width: max-content;
9600
+ flex-shrink: 0;
9601
+ flex-wrap: nowrap;
9602
+ flex-direction: row;
9603
+ border-top-width: var(--border);
9604
+ border-right-width: var(--border);
9605
+ border-bottom-width: var(--border);
9606
+ border-left-width: var(--border);
9078
9607
  }
9079
9608
 
9080
9609
  .zx-badge__dot {
9081
- display: inline-block;
9610
+ display: flex;
9082
9611
  flex: none;
9083
9612
  inline-size: 0.5em;
9084
9613
  block-size: 0.5em;
9085
9614
  box-sizing: border-box;
9086
9615
  border-radius: 50%;
9087
9616
  background: var(--badge-dot);
9088
- border: 0.1em solid var(--badge-dot-ring);
9617
+ border: 0 solid transparent;
9618
+ width: 0.5em;
9619
+ height: 0.5em;
9620
+ flex-shrink: 0;
9621
+ border-top-width: 0.1em;
9622
+ border-right-width: 0.1em;
9623
+ border-bottom-width: 0.1em;
9624
+ border-left-width: 0.1em;
9625
+ border-top-color: var(--badge-dot-ring);
9626
+ border-right-color: var(--badge-dot-ring);
9627
+ border-bottom-color: var(--badge-dot-ring);
9628
+ border-left-color: var(--badge-dot-ring);
9089
9629
  }
9090
9630
 
9091
9631
  .zx-badge__dot.zx-s-running {
9092
- animation: zero-daisy-badge-pulse 1.6s ease-out infinite;
9632
+ box-shadow: 0 0 0 0.2em var(--badge-dot-halo);
9633
+ animation: zero-daisy-badge-pulse 1.6s ease-in-out infinite;
9093
9634
  }
9094
9635
 
9095
9636
  .zx-badge__root.zx-a-color-primary {
@@ -9102,6 +9643,26 @@
9102
9643
  --badge-dot-ring: var(--color-primary-content);
9103
9644
  }
9104
9645
 
9646
+ .zx-root .zx-badge__dot.zx-a-color-primary {
9647
+ --badge-dot-halo: #422ad559;
9648
+ }
9649
+
9650
+ .zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-primary {
9651
+ --badge-dot-halo: #605dff59;
9652
+ }
9653
+
9654
+ .zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-primary {
9655
+ --badge-dot-halo: #9fe88d59;
9656
+ }
9657
+
9658
+ .zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-primary {
9659
+ --badge-dot-halo: #5e81ac59;
9660
+ }
9661
+
9662
+ .zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-primary {
9663
+ --badge-dot-halo: #ff865b59;
9664
+ }
9665
+
9105
9666
  .zx-badge__root.zx-a-color-secondary {
9106
9667
  --badge-fill: var(--color-secondary);
9107
9668
  --badge-ink: var(--color-secondary-content);
@@ -9112,6 +9673,26 @@
9112
9673
  --badge-dot-ring: var(--color-secondary-content);
9113
9674
  }
9114
9675
 
9676
+ .zx-root .zx-badge__dot.zx-a-color-secondary {
9677
+ --badge-dot-halo: #f4309859;
9678
+ }
9679
+
9680
+ .zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-secondary {
9681
+ --badge-dot-halo: #f4309859;
9682
+ }
9683
+
9684
+ .zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-secondary {
9685
+ --badge-dot-halo: #ff7d5d59;
9686
+ }
9687
+
9688
+ .zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-secondary {
9689
+ --badge-dot-halo: #81a1c159;
9690
+ }
9691
+
9692
+ .zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-secondary {
9693
+ --badge-dot-halo: #fd6f9c59;
9694
+ }
9695
+
9115
9696
  .zx-badge__root.zx-a-color-accent {
9116
9697
  --badge-fill: var(--color-accent);
9117
9698
  --badge-ink: var(--color-accent-content);
@@ -9122,6 +9703,26 @@
9122
9703
  --badge-dot-ring: var(--color-accent-content);
9123
9704
  }
9124
9705
 
9706
+ .zx-root .zx-badge__dot.zx-a-color-accent {
9707
+ --badge-dot-halo: #00d3bb59;
9708
+ }
9709
+
9710
+ .zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-accent {
9711
+ --badge-dot-halo: #00d3bb59;
9712
+ }
9713
+
9714
+ .zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-accent {
9715
+ --badge-dot-halo: #c792e959;
9716
+ }
9717
+
9718
+ .zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-accent {
9719
+ --badge-dot-halo: #88c0d059;
9720
+ }
9721
+
9722
+ .zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-accent {
9723
+ --badge-dot-halo: #b387fa59;
9724
+ }
9725
+
9125
9726
  .zx-badge__root.zx-a-color-neutral {
9126
9727
  --badge-fill: var(--color-neutral);
9127
9728
  --badge-ink: var(--color-neutral-content);
@@ -9132,6 +9733,26 @@
9132
9733
  --badge-dot-ring: var(--color-neutral-content);
9133
9734
  }
9134
9735
 
9736
+ .zx-root .zx-badge__dot.zx-a-color-neutral {
9737
+ --badge-dot-halo: #09090b59;
9738
+ }
9739
+
9740
+ .zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-neutral {
9741
+ --badge-dot-halo: #09090b59;
9742
+ }
9743
+
9744
+ .zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-neutral {
9745
+ --badge-dot-halo: #1c212b59;
9746
+ }
9747
+
9748
+ .zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-neutral {
9749
+ --badge-dot-halo: #4c566a59;
9750
+ }
9751
+
9752
+ .zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-neutral {
9753
+ --badge-dot-halo: #1b262c59;
9754
+ }
9755
+
9135
9756
  .zx-badge__root.zx-a-color-info {
9136
9757
  --badge-fill: var(--color-info);
9137
9758
  --badge-ink: var(--color-info-content);
@@ -9142,6 +9763,26 @@
9142
9763
  --badge-dot-ring: var(--color-info-content);
9143
9764
  }
9144
9765
 
9766
+ .zx-root .zx-badge__dot.zx-a-color-info {
9767
+ --badge-dot-halo: #00bafe59;
9768
+ }
9769
+
9770
+ .zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-info {
9771
+ --badge-dot-halo: #00bafe59;
9772
+ }
9773
+
9774
+ .zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-info {
9775
+ --badge-dot-halo: #28ebff59;
9776
+ }
9777
+
9778
+ .zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-info {
9779
+ --badge-dot-halo: #b48ead59;
9780
+ }
9781
+
9782
+ .zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-info {
9783
+ --badge-dot-halo: #89e0eb59;
9784
+ }
9785
+
9145
9786
  .zx-badge__root.zx-a-color-success {
9146
9787
  --badge-fill: var(--color-success);
9147
9788
  --badge-ink: var(--color-success-content);
@@ -9152,6 +9793,26 @@
9152
9793
  --badge-dot-ring: var(--color-success-content);
9153
9794
  }
9154
9795
 
9796
+ .zx-root .zx-badge__dot.zx-a-color-success {
9797
+ --badge-dot-halo: #00d39059;
9798
+ }
9799
+
9800
+ .zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-success {
9801
+ --badge-dot-halo: #00d39059;
9802
+ }
9803
+
9804
+ .zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-success {
9805
+ --badge-dot-halo: #62efbd59;
9806
+ }
9807
+
9808
+ .zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-success {
9809
+ --badge-dot-halo: #a3be8d59;
9810
+ }
9811
+
9812
+ .zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-success {
9813
+ --badge-dot-halo: #addfad59;
9814
+ }
9815
+
9155
9816
  .zx-badge__root.zx-a-color-warning {
9156
9817
  --badge-fill: var(--color-warning);
9157
9818
  --badge-ink: var(--color-warning-content);
@@ -9162,6 +9823,26 @@
9162
9823
  --badge-dot-ring: var(--color-warning-content);
9163
9824
  }
9164
9825
 
9826
+ .zx-root .zx-badge__dot.zx-a-color-warning {
9827
+ --badge-dot-halo: #fcb70059;
9828
+ }
9829
+
9830
+ .zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-warning {
9831
+ --badge-dot-halo: #fcb70059;
9832
+ }
9833
+
9834
+ .zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-warning {
9835
+ --badge-dot-halo: #efd05759;
9836
+ }
9837
+
9838
+ .zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-warning {
9839
+ --badge-dot-halo: #ebcb8b59;
9840
+ }
9841
+
9842
+ .zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-warning {
9843
+ --badge-dot-halo: #f1c89259;
9844
+ }
9845
+
9165
9846
  .zx-badge__root.zx-a-color-error {
9166
9847
  --badge-fill: var(--color-error);
9167
9848
  --badge-ink: var(--color-error-content);
@@ -9172,6 +9853,26 @@
9172
9853
  --badge-dot-ring: var(--color-error-content);
9173
9854
  }
9174
9855
 
9856
+ .zx-root .zx-badge__dot.zx-a-color-error {
9857
+ --badge-dot-halo: #ff627d59;
9858
+ }
9859
+
9860
+ .zx-root.zx-theme-dark .zx-badge__dot.zx-a-color-error {
9861
+ --badge-dot-halo: #ff627d59;
9862
+ }
9863
+
9864
+ .zx-root.zx-theme-dim .zx-badge__dot.zx-a-color-error {
9865
+ --badge-dot-halo: #ffae9b59;
9866
+ }
9867
+
9868
+ .zx-root.zx-theme-nord .zx-badge__dot.zx-a-color-error {
9869
+ --badge-dot-halo: #bf616a59;
9870
+ }
9871
+
9872
+ .zx-root.zx-theme-sunset .zx-badge__dot.zx-a-color-error {
9873
+ --badge-dot-halo: #ffbbbd59;
9874
+ }
9875
+
9175
9876
  .zx-badge__root.zx-a-size-xs {
9176
9877
  font-size: var(--text-xs);
9177
9878
  padding: 0 var(--space-sm);
@@ -9191,9 +9892,13 @@
9191
9892
  font-size: var(--text-md);
9192
9893
  padding: var(--space-xs) var(--space-xl);
9193
9894
  }
9895
+ @keyframes zero-daisy-badge-pulse {
9896
+ from, to { opacity: 1; } 50% { opacity: 0.45; }
9897
+ }
9194
9898
 
9195
9899
  .zx-divider__root {
9196
9900
  --divider-ink: var(--color-base-300);
9901
+ --divider-fit: auto;
9197
9902
  }
9198
9903
 
9199
9904
  .zx-divider__root {
@@ -9236,6 +9941,31 @@
9236
9941
  font-size: var(--text-sm);
9237
9942
  white-space: nowrap;
9238
9943
  color: var(--color-base-content);
9944
+ padding-left: var(--space-md);
9945
+ padding-right: var(--space-md);
9946
+ }
9947
+
9948
+ .zx-divider__label.zx-p-start {
9949
+ padding-left: calc(var(--space-md) * 0);
9950
+ }
9951
+
9952
+ .zx-divider__label.zx-p-end {
9953
+ padding-right: calc(var(--space-md) * 0);
9954
+ }
9955
+
9956
+ .zx-divider__label.zx-o-vertical {
9957
+ padding-left: calc(var(--space-md) * 0);
9958
+ padding-right: calc(var(--space-md) * 0);
9959
+ padding-top: var(--space-sm);
9960
+ padding-bottom: var(--space-sm);
9961
+ }
9962
+
9963
+ .zx-divider__label.zx-o-vertical.zx-p-start {
9964
+ padding-top: calc(var(--space-sm) * 0);
9965
+ }
9966
+
9967
+ .zx-divider__label.zx-o-vertical.zx-p-end {
9968
+ padding-bottom: calc(var(--space-sm) * 0);
9239
9969
  }
9240
9970
 
9241
9971
  .zx-divider__root.zx-a-color-primary {
@@ -9269,6 +9999,25 @@
9269
9999
  .zx-divider__root.zx-a-color-error {
9270
10000
  --divider-ink: var(--color-error);
9271
10001
  }
10002
+ .zx-divider__root.zx-m-labelled {
10003
+ --divider-ink: transparent;
10004
+ }
10005
+ .zx-divider__root.zx-m-labelled.zx-o-horizontal {
10006
+ flex-direction: row;
10007
+ block-size: var(--divider-fit);
10008
+ }
10009
+ .zx-divider__root.zx-m-labelled.zx-o-vertical {
10010
+ inline-size: var(--divider-fit);
10011
+ }
10012
+ .zx-divider__root.zx-m-segment {
10013
+ flex: 1 1 0;
10014
+ }
10015
+ .zx-divider__root.zx-m-segment.zx-o-horizontal {
10016
+ min-width: 0;
10017
+ }
10018
+ .zx-divider__root.zx-m-segment.zx-o-vertical {
10019
+ min-height: 0;
10020
+ }
9272
10021
 
9273
10022
  .zx-skeleton__root {
9274
10023
  --skeleton-fill: var(--color-base-300);
@@ -9462,7 +10211,7 @@
9462
10211
  border-radius: var(--radius-box);
9463
10212
  }
9464
10213
  @keyframes zero-daisyui-skeleton {
9465
- from, to { opacity: 1; } 50% { opacity: 0.55; }
10214
+ 0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; }
9466
10215
  }
9467
10216
 
9468
10217
  .zx-spinner__root {
@@ -9471,34 +10220,54 @@
9471
10220
  }
9472
10221
 
9473
10222
  .zx-spinner__root {
9474
- display: inline-block;
9475
- inline-size: calc(var(--size-field) * 0.5);
9476
- block-size: calc(var(--size-field) * 0.5);
10223
+ display: flex;
10224
+ inline-size: calc(var(--size-selector) * 6);
10225
+ block-size: calc(var(--size-selector) * 6);
9477
10226
  box-sizing: border-box;
9478
10227
  border-radius: 50%;
9479
- border: calc(var(--border) * 2) solid var(--spinner-track);
10228
+ border: 0 solid transparent;
9480
10229
  border-block-start-color: var(--spinner-ink);
9481
10230
  animation: zero-daisyui-spin 0.7s linear infinite;
10231
+ flex-shrink: 0;
10232
+ width: calc(var(--size-selector) * 6);
10233
+ height: calc(var(--size-selector) * 6);
10234
+ border-style: solid;
10235
+ border-top-width: calc(var(--border) * 2);
10236
+ border-right-width: calc(var(--border) * 2);
10237
+ border-bottom-width: calc(var(--border) * 2);
10238
+ border-left-width: calc(var(--border) * 2);
10239
+ border-right-color: var(--spinner-track);
10240
+ border-bottom-color: var(--spinner-track);
10241
+ border-left-color: var(--spinner-track);
10242
+ border-top-color: var(--spinner-ink);
9482
10243
  }
9483
10244
 
9484
10245
  .zx-spinner__root.zx-a-size-xs {
9485
- inline-size: calc(var(--size-field) * 0.35);
9486
- block-size: calc(var(--size-field) * 0.35);
10246
+ inline-size: calc(var(--size-selector) * 4);
10247
+ block-size: calc(var(--size-selector) * 4);
10248
+ width: calc(var(--size-selector) * 4);
10249
+ height: calc(var(--size-selector) * 4);
9487
10250
  }
9488
10251
 
9489
10252
  .zx-spinner__root.zx-a-size-sm {
9490
- inline-size: calc(var(--size-field) * 0.42);
9491
- block-size: calc(var(--size-field) * 0.42);
10253
+ inline-size: calc(var(--size-selector) * 5);
10254
+ block-size: calc(var(--size-selector) * 5);
10255
+ width: calc(var(--size-selector) * 5);
10256
+ height: calc(var(--size-selector) * 5);
9492
10257
  }
9493
10258
 
9494
10259
  .zx-spinner__root.zx-a-size-lg {
9495
- inline-size: calc(var(--size-field) * 0.7);
9496
- block-size: calc(var(--size-field) * 0.7);
10260
+ inline-size: calc(var(--size-selector) * 7);
10261
+ block-size: calc(var(--size-selector) * 7);
10262
+ width: calc(var(--size-selector) * 7);
10263
+ height: calc(var(--size-selector) * 7);
9497
10264
  }
9498
10265
 
9499
10266
  .zx-spinner__root.zx-a-size-xl {
9500
- inline-size: calc(var(--size-field) * 0.9);
9501
- block-size: calc(var(--size-field) * 0.9);
10267
+ inline-size: calc(var(--size-selector) * 8);
10268
+ block-size: calc(var(--size-selector) * 8);
10269
+ width: calc(var(--size-selector) * 8);
10270
+ height: calc(var(--size-selector) * 8);
9502
10271
  }
9503
10272
 
9504
10273
  .zx-spinner__root.zx-a-color-primary {
@@ -9549,13 +10318,26 @@
9549
10318
  padding: calc(var(--space-2xs) - var(--border)) calc(var(--space-md) - var(--border));
9550
10319
  background: var(--kbd-fill);
9551
10320
  color: var(--kbd-ink);
9552
- border: var(--border) solid var(--color-base-300);
10321
+ border: 0 solid transparent;
9553
10322
  border-block-end-width: calc(var(--border) * 2);
9554
10323
  border-radius: var(--radius-field);
9555
10324
  font-size: var(--text-xs);
9556
10325
  font-weight: var(--weight-semibold);
9557
10326
  line-height: var(--leading-normal);
9558
10327
  white-space: nowrap;
10328
+ width: max-content;
10329
+ flex-shrink: 0;
10330
+ flex-wrap: nowrap;
10331
+ flex-direction: row;
10332
+ min-width: 1.75em;
10333
+ border-top-width: var(--border);
10334
+ border-right-width: var(--border);
10335
+ border-left-width: var(--border);
10336
+ border-bottom-width: calc(var(--border) * 2);
10337
+ border-top-color: var(--color-base-300);
10338
+ border-right-color: var(--color-base-300);
10339
+ border-bottom-color: var(--color-base-300);
10340
+ border-left-color: var(--color-base-300);
9559
10341
  }
9560
10342
 
9561
10343
  .zx-kbd__root.zx-a-color-primary {
@@ -9602,6 +10384,7 @@
9602
10384
  font-size: var(--text-xs);
9603
10385
  padding: 0 var(--space-xs);
9604
10386
  min-inline-size: 1.5em;
10387
+ min-width: 1.5em;
9605
10388
  }
9606
10389
 
9607
10390
  .zx-kbd__root.zx-a-size-sm {
@@ -9623,8 +10406,28 @@
9623
10406
  --status-ink: var(--color-base-content);
9624
10407
  }
9625
10408
 
10409
+ .zx-root .zx-status__root {
10410
+ --status-halo: #18181b40;
10411
+ }
10412
+
10413
+ .zx-root.zx-theme-dark .zx-status__root {
10414
+ --status-halo: #ecf9ff40;
10415
+ }
10416
+
10417
+ .zx-root.zx-theme-dim .zx-status__root {
10418
+ --status-halo: #b2ccd640;
10419
+ }
10420
+
10421
+ .zx-root.zx-theme-nord .zx-status__root {
10422
+ --status-halo: #2e344040;
10423
+ }
10424
+
10425
+ .zx-root.zx-theme-sunset .zx-status__root {
10426
+ --status-halo: #9fb9d040;
10427
+ }
10428
+
9626
10429
  .zx-status__root {
9627
- display: inline-block;
10430
+ display: flex;
9628
10431
  inline-size: calc(var(--size-selector) * 2.5);
9629
10432
  block-size: calc(var(--size-selector) * 2.5);
9630
10433
  box-sizing: border-box;
@@ -9632,64 +10435,240 @@
9632
10435
  background: var(--status-ink);
9633
10436
  border: calc((var(--size-selector) * 2.5) / 2) solid var(--status-ink);
9634
10437
  border-radius: 9999px;
10438
+ box-shadow: 0 0 0 calc((var(--size-selector) * 2.5) / 4) var(--status-halo);
10439
+ flex-shrink: 0;
10440
+ width: calc(var(--size-selector) * 2.5);
10441
+ height: calc(var(--size-selector) * 2.5);
9635
10442
  }
9636
10443
 
9637
10444
  .zx-status__root.zx-a-size-xs {
9638
10445
  inline-size: calc(var(--size-selector) * 1.5);
9639
10446
  block-size: calc(var(--size-selector) * 1.5);
9640
10447
  border: calc((var(--size-selector) * 1.5) / 2) solid var(--status-ink);
10448
+ box-shadow: 0 0 0 calc((var(--size-selector) * 1.5) / 4) var(--status-halo);
10449
+ width: calc(var(--size-selector) * 1.5);
10450
+ height: calc(var(--size-selector) * 1.5);
9641
10451
  }
9642
10452
 
9643
10453
  .zx-status__root.zx-a-size-sm {
9644
10454
  inline-size: calc(var(--size-selector) * 2);
9645
10455
  block-size: calc(var(--size-selector) * 2);
9646
10456
  border: calc((var(--size-selector) * 2) / 2) solid var(--status-ink);
10457
+ box-shadow: 0 0 0 calc((var(--size-selector) * 2) / 4) var(--status-halo);
10458
+ width: calc(var(--size-selector) * 2);
10459
+ height: calc(var(--size-selector) * 2);
9647
10460
  }
9648
10461
 
9649
10462
  .zx-status__root.zx-a-size-lg {
9650
10463
  inline-size: calc(var(--size-selector) * 3);
9651
10464
  block-size: calc(var(--size-selector) * 3);
9652
10465
  border: calc((var(--size-selector) * 3) / 2) solid var(--status-ink);
10466
+ box-shadow: 0 0 0 calc((var(--size-selector) * 3) / 4) var(--status-halo);
10467
+ width: calc(var(--size-selector) * 3);
10468
+ height: calc(var(--size-selector) * 3);
9653
10469
  }
9654
10470
 
9655
10471
  .zx-status__root.zx-a-size-xl {
9656
10472
  inline-size: calc(var(--size-selector) * 3.5);
9657
10473
  block-size: calc(var(--size-selector) * 3.5);
9658
10474
  border: calc((var(--size-selector) * 3.5) / 2) solid var(--status-ink);
10475
+ box-shadow: 0 0 0 calc((var(--size-selector) * 3.5) / 4) var(--status-halo);
10476
+ width: calc(var(--size-selector) * 3.5);
10477
+ height: calc(var(--size-selector) * 3.5);
9659
10478
  }
9660
10479
 
9661
10480
  .zx-status__root.zx-a-color-primary {
9662
10481
  --status-ink: var(--color-primary);
9663
10482
  }
9664
10483
 
10484
+ .zx-root .zx-status__root.zx-a-color-primary {
10485
+ --status-halo: #422ad540;
10486
+ }
10487
+
10488
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-primary {
10489
+ --status-halo: #605dff40;
10490
+ }
10491
+
10492
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-primary {
10493
+ --status-halo: #9fe88d40;
10494
+ }
10495
+
10496
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-primary {
10497
+ --status-halo: #5e81ac40;
10498
+ }
10499
+
10500
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-primary {
10501
+ --status-halo: #ff865b40;
10502
+ }
10503
+
9665
10504
  .zx-status__root.zx-a-color-secondary {
9666
10505
  --status-ink: var(--color-secondary);
9667
10506
  }
9668
10507
 
10508
+ .zx-root .zx-status__root.zx-a-color-secondary {
10509
+ --status-halo: #f4309840;
10510
+ }
10511
+
10512
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-secondary {
10513
+ --status-halo: #f4309840;
10514
+ }
10515
+
10516
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-secondary {
10517
+ --status-halo: #ff7d5d40;
10518
+ }
10519
+
10520
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-secondary {
10521
+ --status-halo: #81a1c140;
10522
+ }
10523
+
10524
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-secondary {
10525
+ --status-halo: #fd6f9c40;
10526
+ }
10527
+
9669
10528
  .zx-status__root.zx-a-color-accent {
9670
10529
  --status-ink: var(--color-accent);
9671
10530
  }
9672
10531
 
10532
+ .zx-root .zx-status__root.zx-a-color-accent {
10533
+ --status-halo: #00d3bb40;
10534
+ }
10535
+
10536
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-accent {
10537
+ --status-halo: #00d3bb40;
10538
+ }
10539
+
10540
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-accent {
10541
+ --status-halo: #c792e940;
10542
+ }
10543
+
10544
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-accent {
10545
+ --status-halo: #88c0d040;
10546
+ }
10547
+
10548
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-accent {
10549
+ --status-halo: #b387fa40;
10550
+ }
10551
+
9673
10552
  .zx-status__root.zx-a-color-neutral {
9674
10553
  --status-ink: var(--color-neutral);
9675
10554
  }
9676
10555
 
10556
+ .zx-root .zx-status__root.zx-a-color-neutral {
10557
+ --status-halo: #09090b40;
10558
+ }
10559
+
10560
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-neutral {
10561
+ --status-halo: #09090b40;
10562
+ }
10563
+
10564
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-neutral {
10565
+ --status-halo: #1c212b40;
10566
+ }
10567
+
10568
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-neutral {
10569
+ --status-halo: #4c566a40;
10570
+ }
10571
+
10572
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-neutral {
10573
+ --status-halo: #1b262c40;
10574
+ }
10575
+
9677
10576
  .zx-status__root.zx-a-color-info {
9678
10577
  --status-ink: var(--color-info);
9679
10578
  }
9680
10579
 
10580
+ .zx-root .zx-status__root.zx-a-color-info {
10581
+ --status-halo: #00bafe40;
10582
+ }
10583
+
10584
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-info {
10585
+ --status-halo: #00bafe40;
10586
+ }
10587
+
10588
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-info {
10589
+ --status-halo: #28ebff40;
10590
+ }
10591
+
10592
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-info {
10593
+ --status-halo: #b48ead40;
10594
+ }
10595
+
10596
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-info {
10597
+ --status-halo: #89e0eb40;
10598
+ }
10599
+
9681
10600
  .zx-status__root.zx-a-color-success {
9682
10601
  --status-ink: var(--color-success);
9683
10602
  }
9684
10603
 
10604
+ .zx-root .zx-status__root.zx-a-color-success {
10605
+ --status-halo: #00d39040;
10606
+ }
10607
+
10608
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-success {
10609
+ --status-halo: #00d39040;
10610
+ }
10611
+
10612
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-success {
10613
+ --status-halo: #62efbd40;
10614
+ }
10615
+
10616
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-success {
10617
+ --status-halo: #a3be8d40;
10618
+ }
10619
+
10620
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-success {
10621
+ --status-halo: #addfad40;
10622
+ }
10623
+
9685
10624
  .zx-status__root.zx-a-color-warning {
9686
10625
  --status-ink: var(--color-warning);
9687
10626
  }
9688
10627
 
10628
+ .zx-root .zx-status__root.zx-a-color-warning {
10629
+ --status-halo: #fcb70040;
10630
+ }
10631
+
10632
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-warning {
10633
+ --status-halo: #fcb70040;
10634
+ }
10635
+
10636
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-warning {
10637
+ --status-halo: #efd05740;
10638
+ }
10639
+
10640
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-warning {
10641
+ --status-halo: #ebcb8b40;
10642
+ }
10643
+
10644
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-warning {
10645
+ --status-halo: #f1c89240;
10646
+ }
10647
+
9689
10648
  .zx-status__root.zx-a-color-error {
9690
10649
  --status-ink: var(--color-error);
9691
10650
  }
9692
10651
 
10652
+ .zx-root .zx-status__root.zx-a-color-error {
10653
+ --status-halo: #ff627d40;
10654
+ }
10655
+
10656
+ .zx-root.zx-theme-dark .zx-status__root.zx-a-color-error {
10657
+ --status-halo: #ff627d40;
10658
+ }
10659
+
10660
+ .zx-root.zx-theme-dim .zx-status__root.zx-a-color-error {
10661
+ --status-halo: #ffae9b40;
10662
+ }
10663
+
10664
+ .zx-root.zx-theme-nord .zx-status__root.zx-a-color-error {
10665
+ --status-halo: #bf616a40;
10666
+ }
10667
+
10668
+ .zx-root.zx-theme-sunset .zx-status__root.zx-a-color-error {
10669
+ --status-halo: #ffbbbd40;
10670
+ }
10671
+
9693
10672
  .zx-indicator__root {
9694
10673
  position: relative;
9695
10674
  display: flex;
@@ -9809,6 +10788,7 @@
9809
10788
  border: var(--border) solid var(--color-base-200);
9810
10789
  border-radius: var(--radius-box);
9811
10790
  background: var(--color-base-100);
10791
+ flex-direction: row;
9812
10792
  }
9813
10793
 
9814
10794
  .zx-stats__root.zx-o-vertical {
@@ -9816,12 +10796,31 @@
9816
10796
  }
9817
10797
 
9818
10798
  .zx-stats__item {
9819
- display: grid;
10799
+ display: flex;
9820
10800
  grid-template-columns: 1fr auto;
9821
10801
  column-gap: var(--space-md);
9822
10802
  align-content: center;
9823
10803
  flex: 1 1 0%;
9824
- padding: var(--space-lg) var(--space-xl);
10804
+ padding: 0;
10805
+ flex-direction: column;
10806
+ justify-content: center;
10807
+ position: relative;
10808
+ padding-top: var(--space-lg);
10809
+ padding-bottom: var(--space-lg);
10810
+ padding-left: var(--space-xl);
10811
+ padding-right: var(--space-xl);
10812
+ }
10813
+
10814
+ .zx-stats__item.zx-o-horizontal {
10815
+ border-left-width: var(--border);
10816
+ border-left-style: solid;
10817
+ border-left-color: var(--color-base-200);
10818
+ }
10819
+
10820
+ .zx-stats__item.zx-o-vertical {
10821
+ border-top-width: var(--border);
10822
+ border-top-style: solid;
10823
+ border-top-color: var(--color-base-200);
9825
10824
  }
9826
10825
 
9827
10826
  .zx-stats__title {
@@ -9886,7 +10885,14 @@
9886
10885
  .zx-stats__figure {
9887
10886
  grid-column: 2;
9888
10887
  grid-row: 1 / span 3;
9889
- align-self: center;
10888
+ align-self: auto;
10889
+ position: absolute;
10890
+ top: 0;
10891
+ bottom: 0;
10892
+ right: var(--space-xl);
10893
+ display: flex;
10894
+ flex-direction: column;
10895
+ justify-content: center;
9890
10896
  }
9891
10897
 
9892
10898
  .zx-root .zx-stats__item.zx-a-color-primary {
@@ -10064,6 +11070,15 @@
10064
11070
  .zx-stats__value.zx-a-size-xl {
10065
11071
  font-size: var(--text-3xl);
10066
11072
  }
11073
+ .zx-stats__item.zx-m-first.zx-o-horizontal {
11074
+ border-left-width: calc(var(--border) * 0);
11075
+ }
11076
+ .zx-stats__item.zx-m-first.zx-o-vertical {
11077
+ border-top-width: calc(var(--border) * 0);
11078
+ }
11079
+ .zx-stats__item.zx-m-figure {
11080
+ padding-right: calc(var(--space-xl) + var(--space-md) + 32px);
11081
+ }
10067
11082
 
10068
11083
  .zx-timeline__root {
10069
11084
  --timeline-accent: var(--color-base-content);