@seed-design/css 0.2.1 → 0.2.3

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 (43) hide show
  1. package/all.css +308 -180
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/checkbox.css +5 -112
  5. package/recipes/checkbox.d.ts +1 -5
  6. package/recipes/checkbox.mjs +1 -31
  7. package/recipes/checkmark.css +105 -0
  8. package/recipes/checkmark.d.ts +28 -0
  9. package/recipes/checkmark.mjs +65 -0
  10. package/recipes/chip-tabs.css +42 -10
  11. package/recipes/chip-tabs.d.ts +5 -1
  12. package/recipes/chip-tabs.mjs +6 -0
  13. package/recipes/list-item.css +102 -0
  14. package/recipes/list-item.d.ts +24 -0
  15. package/recipes/list-item.mjs +59 -0
  16. package/recipes/radio.css +29 -50
  17. package/recipes/radio.d.ts +5 -1
  18. package/recipes/radio.mjs +8 -3
  19. package/recipes/radiomark.css +68 -0
  20. package/recipes/radiomark.d.ts +24 -0
  21. package/recipes/radiomark.mjs +43 -0
  22. package/recipes/select-box.css +0 -68
  23. package/recipes/select-box.d.ts +1 -1
  24. package/recipes/select-box.mjs +0 -16
  25. package/recipes/text-field.css +8 -9
  26. package/vars/component/checkbox.d.ts +5 -123
  27. package/vars/component/checkbox.mjs +5 -123
  28. package/vars/component/checkmark.d.ts +121 -0
  29. package/vars/component/checkmark.mjs +121 -0
  30. package/vars/component/chip-tab.d.ts +70 -10
  31. package/vars/component/chip-tab.mjs +70 -10
  32. package/vars/component/chip-tablist.d.ts +10 -2
  33. package/vars/component/chip-tablist.mjs +10 -2
  34. package/vars/component/index.d.ts +3 -0
  35. package/vars/component/index.mjs +3 -0
  36. package/vars/component/list-item.d.ts +72 -0
  37. package/vars/component/list-item.mjs +72 -0
  38. package/vars/component/radio.d.ts +28 -52
  39. package/vars/component/radio.mjs +28 -52
  40. package/vars/component/radiomark.d.ts +77 -0
  41. package/vars/component/radiomark.mjs +77 -0
  42. package/vars/component/select-box.d.ts +0 -47
  43. package/vars/component/select-box.mjs +0 -47
package/all.css CHANGED
@@ -2648,13 +2648,52 @@
2648
2648
  cursor: not-allowed;
2649
2649
  }
2650
2650
 
2651
- .seed-checkbox__control {
2651
+ .seed-checkbox__label {
2652
+ color: var(--seed-color-fg-neutral);
2653
+ }
2654
+
2655
+ .seed-checkbox__label:is(:disabled, [disabled], [data-disabled]) {
2656
+ color: var(--seed-color-fg-disabled);
2657
+ }
2658
+
2659
+ .seed-checkbox__label--weight_default {
2660
+ font-weight: var(--seed-font-weight-regular);
2661
+ }
2662
+
2663
+ .seed-checkbox__label--weight_stronger {
2664
+ font-weight: var(--seed-font-weight-bold);
2665
+ }
2666
+
2667
+ .seed-checkbox__root--size_large {
2668
+ min-height: var(--seed-dimension-x9);
2669
+ --checkmark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
2670
+ }
2671
+
2672
+ .seed-checkbox__label--size_large {
2673
+ font-size: var(--seed-font-size-t5);
2674
+ line-height: var(--seed-line-height-t5);
2675
+ margin-block-start: calc(18px - .65625rem);
2676
+ }
2677
+
2678
+ .seed-checkbox__root--size_medium {
2679
+ min-height: var(--seed-dimension-x8);
2680
+ --checkmark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
2681
+ }
2682
+
2683
+ .seed-checkbox__label--size_medium {
2684
+ font-size: var(--seed-font-size-t4);
2685
+ line-height: var(--seed-line-height-t4);
2686
+ margin-block-start: calc(16px - .59375rem);
2687
+ }
2688
+
2689
+ .seed-checkmark__root {
2652
2690
  box-sizing: border-box;
2691
+ margin-top: var(--checkmark-margin-top, 0);
2653
2692
  flex-shrink: 0;
2654
2693
  position: relative;
2655
2694
  }
2656
2695
 
2657
- .seed-checkbox__icon {
2696
+ .seed-checkmark__icon {
2658
2697
  content: "";
2659
2698
  text-align: center;
2660
2699
  overflow: initial;
@@ -2664,139 +2703,101 @@
2664
2703
  inset: 0;
2665
2704
  }
2666
2705
 
2667
- .seed-checkbox__label {
2668
- color: var(--seed-color-fg-neutral);
2669
- }
2670
-
2671
- .seed-checkbox__label--weight_default {
2672
- font-weight: var(--seed-font-weight-regular);
2673
- }
2674
-
2675
- .seed-checkbox__label--weight_stronger {
2676
- font-weight: var(--seed-font-weight-bold);
2677
- }
2678
-
2679
- .seed-checkbox__control--variant_square {
2706
+ .seed-checkmark__root--variant_square {
2680
2707
  border-style: solid;
2681
2708
  border-width: 1px;
2682
2709
  border-color: var(--seed-color-stroke-neutral-weak);
2683
2710
  }
2684
2711
 
2685
- .seed-checkbox__control--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2712
+ .seed-checkmark__root--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2686
2713
  background: var(--seed-color-bg-brand-solid);
2687
2714
  border-width: 0;
2688
2715
  }
2689
2716
 
2690
- .seed-checkbox__control--variant_square:is(:active, [data-active]) {
2717
+ .seed-checkmark__root--variant_square:is(:active, [data-active]) {
2691
2718
  background: var(--seed-color-bg-layer-default-pressed);
2692
2719
  }
2693
2720
 
2694
- .seed-checkbox__control--variant_square:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2721
+ .seed-checkmark__root--variant_square:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2695
2722
  background: var(--seed-color-bg-brand-solid-pressed);
2696
2723
  }
2697
2724
 
2698
- .seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]) {
2725
+ .seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
2699
2726
  background: var(--seed-color-bg-disabled);
2700
2727
  border-color: var(--seed-color-stroke-neutral-muted);
2701
2728
  }
2702
2729
 
2703
- .seed-checkbox__control--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
2730
+ .seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
2704
2731
  background: var(--seed-color-bg-disabled);
2705
2732
  }
2706
2733
 
2707
- .seed-checkbox__icon--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2734
+ .seed-checkmark__icon--variant_square:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2708
2735
  color: var(--seed-color-palette-static-white);
2709
2736
  display: block;
2710
2737
  }
2711
2738
 
2712
- .seed-checkbox__icon--variant_square:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2739
+ .seed-checkmark__icon--variant_square:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2713
2740
  color: var(--seed-color-fg-disabled);
2714
2741
  display: block;
2715
2742
  }
2716
2743
 
2717
- .seed-checkbox__label--variant_square:is(:disabled, [disabled], [data-disabled]) {
2718
- color: var(--seed-color-fg-disabled);
2719
- }
2720
-
2721
- .seed-checkbox__control--variant_ghost, .seed-checkbox__control--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2744
+ .seed-checkmark__root--variant_ghost, .seed-checkmark__root--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2722
2745
  background: none;
2723
2746
  }
2724
2747
 
2725
- .seed-checkbox__control--variant_ghost:is(:active, [data-active]) {
2748
+ .seed-checkmark__root--variant_ghost:is(:active, [data-active]) {
2726
2749
  background: var(--seed-color-bg-layer-default-pressed);
2727
2750
  }
2728
2751
 
2729
- .seed-checkbox__control--variant_ghost:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2752
+ .seed-checkmark__root--variant_ghost:is(:active, [data-active]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2730
2753
  background: var(--seed-color-palette-carrot-200);
2731
2754
  }
2732
2755
 
2733
- .seed-checkbox__control--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]), .seed-checkbox__control--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
2756
+ .seed-checkmark__root--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]), .seed-checkmark__root--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:active, [data-active]) {
2734
2757
  background: none;
2735
2758
  }
2736
2759
 
2737
- .seed-checkbox__icon--variant_ghost {
2760
+ .seed-checkmark__icon--variant_ghost {
2738
2761
  color: var(--seed-color-fg-placeholder);
2739
2762
  display: block;
2740
2763
  }
2741
2764
 
2742
- .seed-checkbox__icon--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2765
+ .seed-checkmark__icon--variant_ghost:is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
2743
2766
  color: var(--seed-color-fg-brand);
2744
2767
  }
2745
2768
 
2746
- .seed-checkbox__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]), .seed-checkbox__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]), .seed-checkbox__label--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
2769
+ .seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:checked, :indeterminate, [data-checked], [data-indeterminate]), .seed-checkmark__icon--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
2747
2770
  color: var(--seed-color-fg-disabled);
2748
2771
  }
2749
2772
 
2750
- .seed-checkbox__root--size_large {
2751
- min-height: var(--seed-dimension-x9);
2752
- }
2753
-
2754
- .seed-checkbox__control--size_large {
2773
+ .seed-checkmark__root--size_large {
2755
2774
  border-radius: var(--seed-radius-r1);
2756
2775
  width: var(--seed-dimension-x6);
2757
2776
  height: var(--seed-dimension-x6);
2758
- margin: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2) 0;
2759
- }
2760
-
2761
- .seed-checkbox__label--size_large {
2762
- font-size: var(--seed-font-size-t5);
2763
- line-height: var(--seed-line-height-t5);
2764
- margin-block-start: calc(18px - .65625rem);
2765
- }
2766
-
2767
- .seed-checkbox__root--size_medium {
2768
- min-height: var(--seed-dimension-x8);
2769
2777
  }
2770
2778
 
2771
- .seed-checkbox__control--size_medium {
2779
+ .seed-checkmark__root--size_medium {
2772
2780
  border-radius: var(--seed-radius-r1);
2773
2781
  width: var(--seed-dimension-x5);
2774
2782
  height: var(--seed-dimension-x5);
2775
- margin: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2) 0;
2776
2783
  }
2777
2784
 
2778
- .seed-checkbox__label--size_medium {
2779
- font-size: var(--seed-font-size-t4);
2780
- line-height: var(--seed-line-height-t4);
2781
- margin-block-start: calc(16px - .59375rem);
2782
- }
2783
-
2784
- .seed-checkbox__icon--size_medium-variant_ghost {
2785
+ .seed-checkmark__icon--size_medium-variant_ghost {
2785
2786
  width: 14px;
2786
2787
  height: 14px;
2787
2788
  }
2788
2789
 
2789
- .seed-checkbox__icon--size_large-variant_ghost {
2790
+ .seed-checkmark__icon--size_large-variant_ghost {
2790
2791
  width: 18px;
2791
2792
  height: 18px;
2792
2793
  }
2793
2794
 
2794
- .seed-checkbox__icon--size_medium-variant_square {
2795
+ .seed-checkmark__icon--size_medium-variant_square {
2795
2796
  width: 12px;
2796
2797
  height: 12px;
2797
2798
  }
2798
2799
 
2799
- .seed-checkbox__icon--size_large-variant_square {
2800
+ .seed-checkmark__icon--size_large-variant_square {
2800
2801
  width: 14px;
2801
2802
  height: 14px;
2802
2803
  }
@@ -3067,25 +3068,41 @@
3067
3068
  box-sizing: border-box;
3068
3069
  white-space: nowrap;
3069
3070
  border-radius: var(--seed-radius-full);
3070
- padding: var(--seed-dimension-x2) var(--seed-dimension-x3_5);
3071
- min-height: 36px;
3071
+ padding-top: var(--seed-dimension-x2);
3072
+ padding-bottom: var(--seed-dimension-x2);
3072
3073
  font-family: inherit;
3073
- font-size: var(--seed-font-size-t4);
3074
- font-weight: var(--seed-font-weight-bold);
3074
+ font-weight: var(--seed-font-weight-medium);
3075
3075
  border: none;
3076
3076
  justify-content: center;
3077
3077
  align-items: center;
3078
3078
  display: flex;
3079
3079
  }
3080
3080
 
3081
- .seed-chip-tabs__list--variant_neutralSolid {
3082
- gap: 0;
3081
+ .seed-chip-tabs__list--size_medium {
3082
+ gap: 8px;
3083
+ }
3084
+
3085
+ .seed-chip-tabs__trigger--size_medium {
3086
+ min-height: 36px;
3087
+ font-size: var(--seed-font-size-t4);
3088
+ padding-left: var(--seed-dimension-x3_5);
3089
+ padding-right: var(--seed-dimension-x3_5);
3090
+ }
3091
+
3092
+ .seed-chip-tabs__list--size_large {
3093
+ gap: 8px;
3094
+ }
3095
+
3096
+ .seed-chip-tabs__trigger--size_large {
3097
+ min-height: 40px;
3098
+ font-size: var(--seed-font-size-t4);
3099
+ padding-left: var(--seed-dimension-x4);
3100
+ padding-right: var(--seed-dimension-x4);
3083
3101
  }
3084
3102
 
3085
3103
  .seed-chip-tabs__trigger--variant_neutralSolid {
3104
+ background-color: var(--seed-color-bg-neutral-weak);
3086
3105
  color: var(--seed-color-fg-neutral);
3087
- font-weight: var(--seed-font-weight-bold);
3088
- background-color: #0000;
3089
3106
  }
3090
3107
 
3091
3108
  .seed-chip-tabs__trigger--variant_neutralSolid:is(:selected, [data-selected]) {
@@ -3111,20 +3128,44 @@
3111
3128
  color: var(--seed-color-fg-disabled);
3112
3129
  }
3113
3130
 
3114
- .seed-chip-tabs__list--variant_brandSolid {
3115
- gap: 8px;
3131
+ .seed-chip-tabs__trigger--variant_neutralOutline {
3132
+ border: 1px solid var(--seed-color-stroke-neutral-muted);
3133
+ color: var(--seed-color-fg-neutral);
3134
+ background-color: #0000;
3135
+ }
3136
+
3137
+ .seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]) {
3138
+ background-color: var(--seed-color-bg-neutral-inverted);
3139
+ color: var(--seed-color-fg-neutral-inverted);
3140
+ border-color: #0000;
3141
+ }
3142
+
3143
+ .seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
3144
+ background-color: var(--seed-color-bg-layer-default-pressed);
3145
+ }
3146
+
3147
+ .seed-chip-tabs__trigger--variant_neutralOutline:is(:selected, [data-selected]):is(:active, [data-active]) {
3148
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
3149
+ }
3150
+
3151
+ .seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
3152
+ cursor: not-allowed;
3153
+ color: var(--seed-color-fg-disabled);
3154
+ }
3155
+
3156
+ .seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]):is(:selected, [data-selected]) {
3157
+ background-color: var(--seed-color-bg-disabled);
3158
+ color: var(--seed-color-fg-disabled);
3116
3159
  }
3117
3160
 
3118
3161
  .seed-chip-tabs__trigger--variant_brandSolid {
3119
3162
  background-color: var(--seed-color-bg-neutral-weak);
3120
3163
  color: var(--seed-color-fg-neutral-muted);
3121
- font-weight: var(--seed-font-weight-medium);
3122
3164
  }
3123
3165
 
3124
3166
  .seed-chip-tabs__trigger--variant_brandSolid:is(:selected, [data-selected]) {
3125
3167
  background-color: var(--seed-color-bg-brand-solid);
3126
3168
  color: var(--seed-color-palette-static-white);
3127
- font-weight: var(--seed-font-weight-bold);
3128
3169
  }
3129
3170
 
3130
3171
  .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
@@ -4164,6 +4205,119 @@
4164
4205
  --seed-suffix-icon-size: var(--seed-dimension-x3);
4165
4206
  }
4166
4207
 
4208
+ .seed-list-item__root {
4209
+ box-sizing: border-box;
4210
+ -webkit-font-smoothing: antialiased;
4211
+ -moz-osx-font-smoothing: grayscale;
4212
+ z-index: 0;
4213
+ width: 100%;
4214
+ padding-inline: var(--seed-dimension-spacing-x-global-gutter);
4215
+ padding-block: var(--seed-dimension-x2_5);
4216
+ --seed-box-align-items: center;
4217
+ align-items: var(--seed-box-align-items);
4218
+ transition-property: background-color;
4219
+ transition-duration: var(--seed-duration-d3);
4220
+ transition-timing-function: var(--seed-timing-function-easing);
4221
+ border: none;
4222
+ font-family: inherit;
4223
+ display: flex;
4224
+ position: relative;
4225
+ }
4226
+
4227
+ .seed-list-item__prefix {
4228
+ --seed-box-padding-right: var(--seed-dimension-x3);
4229
+ padding-right: var(--seed-box-padding-right);
4230
+ --seed-icon-size: 22px;
4231
+ --seed-icon-color: var(--seed-color-fg-neutral);
4232
+ flex-shrink: 0;
4233
+ align-items: center;
4234
+ display: inline-flex;
4235
+ }
4236
+
4237
+ .seed-list-item__prefix:is(:disabled, [disabled], [data-disabled]) {
4238
+ --seed-icon-color: var(--seed-color-fg-disabled);
4239
+ }
4240
+
4241
+ .seed-list-item__suffix {
4242
+ --seed-box-position: initial;
4243
+ position: var(--seed-box-position);
4244
+ --seed-box-gap: var(--seed-dimension-x1);
4245
+ align-items: center;
4246
+ gap: var(--seed-box-gap);
4247
+ font-size: var(--seed-font-size-t5);
4248
+ line-height: var(--seed-line-height-t5);
4249
+ font-weight: var(--seed-font-weight-regular);
4250
+ color: var(--seed-color-fg-neutral-subtle);
4251
+ --seed-icon-size: 18px;
4252
+ --seed-icon-color: var(--seed-color-fg-neutral-subtle);
4253
+ flex-shrink: 0;
4254
+ display: inline-flex;
4255
+ }
4256
+
4257
+ .seed-list-item__suffix:is(:disabled, [disabled], [data-disabled]) {
4258
+ --seed-icon-color: var(--seed-color-fg-disabled);
4259
+ }
4260
+
4261
+ .seed-list-item__content {
4262
+ box-sizing: border-box;
4263
+ text-align: start;
4264
+ --seed-box-gap: var(--seed-dimension-x0_5);
4265
+ align-items: flex-start;
4266
+ gap: var(--seed-box-gap);
4267
+ --seed-box-padding-right: var(--seed-dimension-x2_5);
4268
+ padding-right: var(--seed-box-padding-right);
4269
+ flex-direction: column;
4270
+ flex-grow: 1;
4271
+ display: inline-flex;
4272
+ }
4273
+
4274
+ .seed-list-item__content:after {
4275
+ content: "";
4276
+ position: absolute;
4277
+ inset: 0;
4278
+ }
4279
+
4280
+ .seed-list-item__content:before {
4281
+ content: "";
4282
+ z-index: -1;
4283
+ transition-property: background-color;
4284
+ transition-duration: var(--seed-duration-d3);
4285
+ transition-timing-function: var(--seed-timing-function-easing);
4286
+ position: absolute;
4287
+ inset: 0;
4288
+ }
4289
+
4290
+ .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before, .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
4291
+ background-color: var(--seed-color-bg-layer-default-pressed);
4292
+ }
4293
+
4294
+ .seed-list-item__title {
4295
+ font-size: var(--seed-font-size-t5);
4296
+ line-height: var(--seed-line-height-t5);
4297
+ font-weight: var(--seed-font-weight-medium);
4298
+ color: var(--seed-color-fg-neutral);
4299
+ flex-shrink: 0;
4300
+ }
4301
+
4302
+ .seed-list-item__title:is(:disabled, [disabled], [data-disabled]) {
4303
+ color: var(--seed-color-fg-disabled);
4304
+ }
4305
+
4306
+ .seed-list-item__detail {
4307
+ font-size: var(--seed-font-size-t3);
4308
+ line-height: var(--seed-line-height-t3);
4309
+ font-weight: var(--seed-font-weight-regular);
4310
+ color: var(--seed-color-fg-neutral-subtle);
4311
+ }
4312
+
4313
+ .seed-list-item__detail:is(:disabled, [disabled], [data-disabled]) {
4314
+ color: var(--seed-color-fg-neutral-subtle);
4315
+ }
4316
+
4317
+ .seed-list-item__root--highlighted_true {
4318
+ background-color: var(--seed-color-palette-carrot-100);
4319
+ }
4320
+
4167
4321
  .seed-manner-temp {
4168
4322
  box-sizing: border-box;
4169
4323
  justify-content: flex-start;
@@ -4782,80 +4936,136 @@
4782
4936
  }
4783
4937
 
4784
4938
  .seed-radio__root {
4939
+ vertical-align: top;
4940
+ isolation: isolate;
4941
+ cursor: pointer;
4942
+ align-items: flex-start;
4943
+ gap: var(--seed-dimension-x2);
4944
+ max-inline-size: 100%;
4945
+ display: inline-flex;
4946
+ position: relative;
4947
+ }
4948
+
4949
+ .seed-radio__root:is(:disabled, [disabled], [data-disabled]) {
4950
+ cursor: not-allowed;
4951
+ }
4952
+
4953
+ .seed-radio__label {
4954
+ color: var(--seed-color-fg-neutral);
4955
+ }
4956
+
4957
+ .seed-radio__label:is(:disabled, [disabled], [data-disabled]) {
4958
+ color: var(--seed-color-fg-disabled);
4959
+ }
4960
+
4961
+ .seed-radio__label--weight_default {
4962
+ font-weight: var(--seed-font-weight-regular);
4963
+ }
4964
+
4965
+ .seed-radio__label--weight_stronger {
4966
+ font-weight: var(--seed-font-weight-bold);
4967
+ }
4968
+
4969
+ .seed-radio__root--size_large {
4970
+ min-height: var(--seed-dimension-x9);
4971
+ --radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
4972
+ }
4973
+
4974
+ .seed-radio__label--size_large {
4975
+ font-size: var(--seed-font-size-t5);
4976
+ line-height: var(--seed-line-height-t5);
4977
+ margin-block-start: calc(18px - .65625rem);
4978
+ }
4979
+
4980
+ .seed-radio__root--size_medium {
4981
+ min-height: var(--seed-dimension-x8);
4982
+ --radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
4983
+ }
4984
+
4985
+ .seed-radio__label--size_medium {
4986
+ font-size: var(--seed-font-size-t4);
4987
+ line-height: var(--seed-line-height-t4);
4988
+ margin-block-start: calc(16px - .59375rem);
4989
+ }
4990
+
4991
+ .seed-radiomark__root {
4785
4992
  box-sizing: border-box;
4786
4993
  background-color: var(--seed-color-bg-layer-default);
4787
4994
  border-style: solid;
4788
4995
  border-width: 1px;
4789
4996
  border-color: var(--seed-color-stroke-neutral-weak);
4790
4997
  border-radius: var(--seed-radius-full);
4998
+ margin-top: var(--radiomark-margin-top, 0);
4791
4999
  flex: none;
4792
5000
  justify-content: center;
4793
5001
  align-items: center;
4794
5002
  display: flex;
5003
+ position: relative;
4795
5004
  }
4796
5005
 
4797
- .seed-radio__root:is(:active, [data-active]) {
5006
+ .seed-radiomark__root:is(:active, [data-active]) {
4798
5007
  background-color: var(--seed-color-bg-layer-default-pressed);
4799
5008
  }
4800
5009
 
4801
- .seed-radio__root:is(:checked, [data-checked]) {
5010
+ .seed-radiomark__root:is(:checked, [data-checked]) {
4802
5011
  background-color: var(--seed-color-bg-brand-solid);
4803
5012
  border-width: 0;
4804
5013
  }
4805
5014
 
4806
- .seed-radio__root:is(:active, [data-active]):is(:checked, [data-checked]) {
5015
+ .seed-radiomark__root:is(:active, [data-active]):is(:checked, [data-checked]) {
4807
5016
  background-color: var(--seed-color-bg-brand-solid-pressed);
4808
5017
  }
4809
5018
 
4810
- .seed-radio__root:is(:disabled, [disabled], [data-disabled]) {
5019
+ .seed-radiomark__root:is(:disabled, [disabled], [data-disabled]) {
4811
5020
  background-color: var(--seed-color-palette-gray-300);
4812
5021
  }
4813
5022
 
4814
- .seed-radio__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
4815
- background-color: none;
5023
+ .seed-radiomark__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
5024
+ border-width: 1px;
4816
5025
  border-color: var(--seed-color-palette-gray-300);
5026
+ background: none;
4817
5027
  }
4818
5028
 
4819
- .seed-radio__icon {
5029
+ .seed-radiomark__icon {
4820
5030
  border-radius: var(--seed-radius-full);
4821
5031
  display: none;
4822
5032
  }
4823
5033
 
4824
- .seed-radio__icon:is(:checked, [data-checked]) {
4825
- background-color: var(--seed-color-palette-static-white);
5034
+ .seed-radiomark__icon:is(:checked, [data-checked]) {
5035
+ color: var(--seed-color-palette-static-white);
4826
5036
  display: block;
4827
5037
  }
4828
5038
 
4829
- .seed-radio__icon:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
4830
- background-color: var(--seed-color-palette-gray-300);
5039
+ .seed-radiomark__icon:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
5040
+ color: var(--seed-color-palette-gray-300);
4831
5041
  }
4832
5042
 
4833
- .seed-radio__root--size_large {
5043
+ .seed-radiomark__root--size_large {
4834
5044
  width: var(--seed-dimension-x6);
4835
5045
  height: var(--seed-dimension-x6);
4836
5046
  }
4837
5047
 
4838
- .seed-radio__icon--size_large {
5048
+ .seed-radiomark__icon--size_large {
4839
5049
  width: var(--seed-dimension-x2_5);
4840
5050
  height: var(--seed-dimension-x2_5);
4841
5051
  }
4842
5052
 
4843
- .seed-radio__icon--size_large:is(:disabled, [disabled], [data-disabled]) {
5053
+ .seed-radiomark__icon--size_large:is(:disabled, [disabled], [data-disabled]) {
4844
5054
  width: var(--seed-dimension-x3);
4845
5055
  height: var(--seed-dimension-x3);
4846
5056
  }
4847
5057
 
4848
- .seed-radio__root--size_medium {
5058
+ .seed-radiomark__root--size_medium {
4849
5059
  width: var(--seed-dimension-x5);
4850
5060
  height: var(--seed-dimension-x5);
4851
5061
  }
4852
5062
 
4853
- .seed-radio__icon--size_medium {
5063
+ .seed-radiomark__icon--size_medium {
4854
5064
  width: var(--seed-dimension-x2);
4855
5065
  height: var(--seed-dimension-x2);
4856
5066
  }
4857
5067
 
4858
- .seed-radio__icon--size_medium:is(:disabled, [disabled], [data-disabled]) {
5068
+ .seed-radiomark__icon--size_medium:is(:disabled, [disabled], [data-disabled]) {
4859
5069
  width: var(--seed-dimension-x2_5);
4860
5070
  height: var(--seed-dimension-x2_5);
4861
5071
  }
@@ -5053,86 +5263,6 @@
5053
5263
  display: flex;
5054
5264
  }
5055
5265
 
5056
- .seed-select-box__checkboxControl {
5057
- box-sizing: border-box;
5058
- width: var(--seed-dimension-x6);
5059
- height: var(--seed-dimension-x6);
5060
- background-color: var(--seed-color-bg-layer-default);
5061
- border-style: solid;
5062
- border-width: 1px;
5063
- border-color: var(--seed-color-stroke-neutral-weak);
5064
- border-radius: var(--seed-radius-r1);
5065
- flex: none;
5066
- justify-content: center;
5067
- align-items: center;
5068
- display: flex;
5069
- }
5070
-
5071
- .seed-select-box__checkboxControl:is(:active, [data-active]) {
5072
- background-color: var(--seed-color-bg-layer-default-pressed);
5073
- }
5074
-
5075
- .seed-select-box__checkboxControl:is(:checked, [data-checked]) {
5076
- background-color: var(--seed-color-bg-brand-solid);
5077
- border-width: 0;
5078
- }
5079
-
5080
- .seed-select-box__checkboxControl:is(:checked, [data-checked]):is(:active, [data-active]) {
5081
- background-color: var(--seed-color-bg-brand-solid-pressed);
5082
- }
5083
-
5084
- .seed-select-box__checkboxIcon {
5085
- width: var(--seed-dimension-x3_5);
5086
- height: var(--seed-dimension-x3_5);
5087
- display: none;
5088
- }
5089
-
5090
- .seed-select-box__checkboxIcon:is(:checked, [data-checked]) {
5091
- color: var(--seed-color-palette-static-white);
5092
- display: block;
5093
- }
5094
-
5095
- .seed-select-box__radioControl {
5096
- box-sizing: border-box;
5097
- width: var(--seed-dimension-x6);
5098
- height: var(--seed-dimension-x6);
5099
- background-color: var(--seed-color-bg-layer-default);
5100
- border-style: solid;
5101
- border-width: 1px;
5102
- border-color: var(--seed-color-stroke-neutral-weak);
5103
- border-radius: var(--seed-radius-full);
5104
- flex: none;
5105
- justify-content: center;
5106
- align-items: center;
5107
- display: flex;
5108
- }
5109
-
5110
- .seed-select-box__radioControl:is(:active, [data-active]) {
5111
- background-color: var(--seed-color-bg-layer-default-pressed);
5112
- }
5113
-
5114
- .seed-select-box__radioControl:is(:checked, [data-checked]) {
5115
- background-color: var(--seed-color-bg-brand-solid);
5116
- border-width: 0;
5117
- }
5118
-
5119
- .seed-select-box__radioControl:is(:checked, [data-checked]):is(:active, [data-active]) {
5120
- background-color: var(--seed-color-bg-brand-solid-pressed);
5121
- }
5122
-
5123
- .seed-select-box__radioIcon {
5124
- width: var(--seed-dimension-x2_5);
5125
- height: var(--seed-dimension-x2_5);
5126
- border-radius: var(--seed-radius-full);
5127
- display: none;
5128
- }
5129
-
5130
- .seed-select-box__radioIcon:is(:checked, [data-checked]) {
5131
- background-color: var(--seed-color-palette-static-white);
5132
- color: var(--seed-color-palette-static-white);
5133
- display: block;
5134
- }
5135
-
5136
5266
  .seed-select-box__label {
5137
5267
  color: var(--seed-color-fg-neutral);
5138
5268
  font-weight: var(--seed-font-weight-bold);
@@ -5924,9 +6054,17 @@
5924
6054
  .seed-text-field__value {
5925
6055
  box-sizing: border-box;
5926
6056
  font: inherit;
6057
+ resize: none;
6058
+ height: 100%;
6059
+ color: var(--seed-color-fg-neutral);
6060
+ background: none;
6061
+ border: none;
6062
+ outline: none;
6063
+ flex-grow: 1;
5927
6064
  }
5928
6065
 
5929
6066
  .seed-text-field__value:is(input) {
6067
+ width: 0;
5930
6068
  padding-inline: 0;
5931
6069
  }
5932
6070
 
@@ -5936,16 +6074,6 @@
5936
6074
  padding-inline: 0;
5937
6075
  }
5938
6076
 
5939
- .seed-text-field__value {
5940
- resize: none;
5941
- height: 100%;
5942
- color: var(--seed-color-fg-neutral);
5943
- background: none;
5944
- border: none;
5945
- outline: none;
5946
- flex-grow: 1;
5947
- }
5948
-
5949
6077
  .seed-text-field__value::placeholder {
5950
6078
  color: var(--seed-color-fg-placeholder);
5951
6079
  }