@tangible/ui 0.0.4 → 0.0.6

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 (25) hide show
  1. package/README.md +124 -27
  2. package/components/Accordion/Accordion.d.ts +1 -1
  3. package/components/Accordion/Accordion.js +93 -22
  4. package/components/Accordion/index.d.ts +1 -1
  5. package/components/Accordion/types.d.ts +20 -3
  6. package/components/Combobox/Combobox.js +2 -1
  7. package/components/Icon/Icon.js +2 -1
  8. package/components/Modal/Modal.js +2 -2
  9. package/components/MoveHandle/MoveHandle.js +13 -2
  10. package/components/MultiSelect/MultiSelect.js +2 -1
  11. package/components/Progress/Progress.js +2 -1
  12. package/components/Select/Select.js +2 -1
  13. package/components/StepList/StepList.js +2 -1
  14. package/components/Tabs/Tabs.js +2 -2
  15. package/components/Toolbar/Toolbar.js +2 -1
  16. package/components/Tooltip/Tooltip.js +2 -1
  17. package/package.json +7 -9
  18. package/styles/all.css +1 -1
  19. package/styles/all.expanded.css +107 -39
  20. package/styles/all.expanded.unlayered.css +107 -39
  21. package/styles/all.unlayered.css +1 -1
  22. package/styles/components/input/index.scss +2 -2
  23. package/styles/index.scss +14 -0
  24. package/styles/system/_control.scss +6 -3
  25. package/tui-manifest.json +23 -4
package/styles/all.expanded.css CHANGED
@@ -23,11 +23,17 @@
23
23
  --tui-accordion-bg
24
24
  --tui-accordion-bg-open
25
25
  --tui-accordion-border
26
+ --tui-accordion-divider
26
27
  --tui-accordion-radius
27
28
  --tui-accordion-padding
29
+ --tui-accordion-trigger-padding
30
+ --tui-accordion-trigger-bg
31
+ --tui-accordion-trigger-hover
32
+ --tui-accordion-panel-padding
33
+ --tui-accordion-panel-bg
34
+ --tui-accordion-panel-spacing
28
35
  --tui-accordion-gap
29
36
  --tui-accordion-indicator
30
- --tui-accordion-trigger-hover
31
37
  */
32
38
  /* @tui-tokens
33
39
  --tui-avatar-size
@@ -91,6 +97,7 @@
91
97
  --tui-combobox-content-border
92
98
  --tui-combobox-content-shadow
93
99
  --tui-combobox-content-radius
100
+ --tui-combobox-option-radius
94
101
  --tui-combobox-option-bg-hover
95
102
  --tui-combobox-option-bg-selected
96
103
  */
@@ -126,6 +133,7 @@
126
133
  --tui-multiselect-content-border
127
134
  --tui-multiselect-content-shadow
128
135
  --tui-multiselect-content-radius
136
+ --tui-multiselect-option-radius
129
137
  --tui-multiselect-option-bg-hover
130
138
  --tui-multiselect-option-bg-selected
131
139
  --tui-multiselect-chip-bg
@@ -141,6 +149,7 @@
141
149
  --tui-select-content-border
142
150
  --tui-select-content-shadow
143
151
  --tui-select-content-radius
152
+ --tui-select-option-radius
144
153
  --tui-select-option-bg-hover
145
154
  --tui-select-option-bg-selected
146
155
  */
@@ -163,6 +172,11 @@
163
172
  /* @tui-tokens
164
173
  --tui-modal-z
165
174
  --tui-modal-max
175
+ --tui-modal-spacing
176
+ --tui-modal-offset-top
177
+ --tui-modal-offset-bottom
178
+ --tui-modal-offset-start
179
+ --tui-modal-offset-end
166
180
  --tui-modal-backdrop
167
181
  --tui-modal-bg
168
182
  --tui-modal-border
@@ -624,6 +638,8 @@
624
638
  --tui-radius-lg: 12px;
625
639
  --tui-font-size-base: 16px;
626
640
  --tui-line: 1.5;
641
+ --tui-typography-weight-normal: 400;
642
+ --tui-typography-weight-bold: 700;
627
643
  --tui-typography-size: var(--tui-font-size-base);
628
644
  --tui-typography-line-height: 1.4;
629
645
  --tui-typography-font-family: inherit;
@@ -665,6 +681,13 @@
665
681
  text-transform: none;
666
682
  letter-spacing: normal;
667
683
  }
684
+ .tui-interface input:focus, .tui-interface input:focus-visible,
685
+ .tui-interface textarea:focus,
686
+ .tui-interface textarea:focus-visible,
687
+ .tui-interface select:focus,
688
+ .tui-interface select:focus-visible {
689
+ box-shadow: none;
690
+ }
668
691
  }
669
692
  @layer components {
670
693
  :where(.tui-interface) .tui-accordion {
@@ -674,12 +697,17 @@
674
697
  }
675
698
  :where(.tui-interface) .tui-accordion__item {
676
699
  --_bg: var(--tui-accordion-bg, var(--tui-color-bg-surface));
677
- --_bg-open: var(--tui-accordion-bg-open, var(--_bg));
700
+ --_bg-open: var(--tui-accordion-bg-open, var(--tui-color-bg-surface));
678
701
  --_border: var(--tui-accordion-border, var(--tui-color-border));
702
+ --_divider: var(--tui-accordion-divider, var(--_border));
679
703
  --_radius: var(--tui-accordion-radius, var(--tui-radius-md));
680
704
  --_padding: var(--tui-accordion-padding, var(--tui-spacing-md));
681
- --_indicator: var(--tui-accordion-indicator, currentColor);
705
+ --_trigger-padding: var(--tui-accordion-trigger-padding, var(--_padding));
706
+ --_trigger-bg: var(--tui-accordion-trigger-bg, transparent);
682
707
  --_trigger-hover: var(--tui-accordion-trigger-hover, var(--tui-color-bg-muted));
708
+ --_panel-padding: var(--tui-accordion-panel-padding, var(--_padding));
709
+ --_panel-bg: var(--tui-accordion-panel-bg, transparent);
710
+ --_indicator: var(--tui-accordion-indicator, currentColor);
683
711
  background-color: var(--_bg);
684
712
  border: var(--tui-border-width) solid var(--_border);
685
713
  border-radius: var(--_radius);
@@ -691,7 +719,7 @@
691
719
  :where(.tui-interface) .tui-accordion__item[data-disabled] {
692
720
  opacity: var(--tui-opacity-disabled);
693
721
  }
694
- :where(.tui-interface) .tui-accordion__heading {
722
+ .tui-interface .tui-accordion__heading {
695
723
  margin: 0;
696
724
  font: inherit;
697
725
  }
@@ -701,10 +729,10 @@
701
729
  justify-content: space-between;
702
730
  gap: var(--tui-spacing-sm);
703
731
  width: 100%;
704
- padding: var(--_padding);
732
+ padding: var(--_trigger-padding);
705
733
  border: none;
706
734
  border-radius: var(--_radius);
707
- background: transparent;
735
+ background: var(--_trigger-bg);
708
736
  color: inherit;
709
737
  font: inherit;
710
738
  font-weight: var(--tui-font-weight-medium, 500);
@@ -753,9 +781,11 @@
753
781
  grid-template-rows: 1fr;
754
782
  }
755
783
  :where(.tui-interface) .tui-accordion__panel-content {
784
+ --_panel-spacing: var(--tui-accordion-panel-spacing, var(--_panel-padding));
756
785
  min-height: 0;
757
786
  overflow: hidden;
758
- padding-inline: var(--_padding);
787
+ padding-inline: var(--_panel-padding);
788
+ background: var(--_panel-bg);
759
789
  }
760
790
  :where(.tui-interface) .tui-accordion__panel-content > *:first-child {
761
791
  margin-block-start: 0;
@@ -763,10 +793,15 @@
763
793
  :where(.tui-interface) .tui-accordion__panel-content > *:last-child {
764
794
  margin-block-end: 0;
765
795
  }
796
+ :where(.tui-interface) .tui-accordion__panel-content::before {
797
+ content: "";
798
+ display: block;
799
+ height: var(--_panel-spacing);
800
+ }
766
801
  :where(.tui-interface) .tui-accordion__panel-content::after {
767
802
  content: "";
768
803
  display: block;
769
- height: var(--_padding);
804
+ height: var(--_panel-spacing);
770
805
  }
771
806
  :where(.tui-interface) .tui-accordion__panel[data-state=closed] > .tui-accordion__panel-content {
772
807
  animation: tui-fadeToTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
@@ -774,6 +809,25 @@
774
809
  :where(.tui-interface) .tui-accordion__panel[data-state=open] > .tui-accordion__panel-content {
775
810
  animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
776
811
  }
812
+ :where(.tui-interface) .tui-accordion__item[data-state=open] > .tui-accordion__panel {
813
+ border-block-start: var(--tui-border-width) solid var(--_divider);
814
+ }
815
+ :where(.tui-interface) .tui-accordion.is-variant-flush {
816
+ gap: 0;
817
+ border: var(--tui-border-width) solid var(--tui-accordion-border, var(--tui-color-border));
818
+ border-radius: var(--tui-accordion-radius, var(--tui-radius-md));
819
+ overflow: hidden;
820
+ }
821
+ :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__item {
822
+ border: none;
823
+ border-radius: 0;
824
+ }
825
+ :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__item + .tui-accordion__item {
826
+ border-block-start: var(--tui-border-width) solid var(--_border);
827
+ }
828
+ :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__trigger {
829
+ border-radius: 0;
830
+ }
777
831
  @media (forced-colors: active) {
778
832
  :where(.tui-interface) .tui-accordion__item {
779
833
  border-color: CanvasText;
@@ -1754,7 +1808,7 @@
1754
1808
  align-items: center;
1755
1809
  }
1756
1810
  .tui-interface .tui-combobox__input {
1757
- --_bg: var(--tui-combobox-input-bg, var(--tui-select-trigger-bg, var(--tui-color-bg)));
1811
+ --_bg: var(--tui-combobox-input-bg, var(--tui-select-trigger-bg, var(--tui-color-bg-surface)));
1758
1812
  --_fg: var(--tui-combobox-input-fg, var(--tui-select-trigger-fg, var(--tui-color-fg)));
1759
1813
  --_border: var(--tui-combobox-input-border, var(--tui-select-trigger-border, var(--tui-color-border)));
1760
1814
  --_border-focus: var(--tui-combobox-input-border-focus, var(--tui-select-trigger-border-focus, var(--tui-theme-primary-base)));
@@ -1762,7 +1816,7 @@
1762
1816
  appearance: none;
1763
1817
  font: inherit;
1764
1818
  margin: 0;
1765
- --_fs: var(--tui-typography-size-md);
1819
+ --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
1766
1820
  --_py: var(--tui-spacing-xxs);
1767
1821
  --_height: calc(2em + 2 * var(--_py));
1768
1822
  font-size: var(--_fs);
@@ -1770,11 +1824,11 @@
1770
1824
  min-height: var(--tui-control-height-md, var(--_height));
1771
1825
  }
1772
1826
  .tui-interface .tui-combobox__input.is-size-sm {
1773
- --_fs: var(--tui-typography-size-sm);
1827
+ --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
1774
1828
  min-height: var(--tui-control-height-sm, var(--_height));
1775
1829
  }
1776
1830
  .tui-interface .tui-combobox__input.is-size-lg {
1777
- --_fs: var(--tui-typography-size-lg);
1831
+ --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
1778
1832
  min-height: var(--tui-control-height-lg, var(--_height));
1779
1833
  }
1780
1834
  .tui-interface .tui-combobox__input {
@@ -1877,6 +1931,7 @@
1877
1931
  animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
1878
1932
  }
1879
1933
  :where(.tui-interface) .tui-combobox__option {
1934
+ --_option-radius: var(--tui-combobox-option-radius, var(--tui-select-option-radius, var(--tui-radius-sm)));
1880
1935
  --_bg-hover: var(--tui-combobox-option-bg-hover, var(--tui-select-option-bg-hover, var(--tui-theme-secondary-subtlest)));
1881
1936
  --_bg-selected: var(--tui-combobox-option-bg-selected, var(--tui-select-option-bg-selected, var(--tui-theme-primary-subtlest)));
1882
1937
  display: flex;
@@ -1884,7 +1939,7 @@
1884
1939
  justify-content: space-between;
1885
1940
  gap: var(--tui-spacing-xs);
1886
1941
  padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
1887
- border-radius: var(--tui-radius-sm);
1942
+ border-radius: var(--_option-radius);
1888
1943
  cursor: pointer;
1889
1944
  font-size: var(--tui-typography-size-sm);
1890
1945
  line-height: 1.4;
@@ -2163,7 +2218,7 @@
2163
2218
  pointer-events: none;
2164
2219
  }
2165
2220
  .tui-interface .tui-multiselect__trigger {
2166
- --_bg: var(--tui-multiselect-trigger-bg, var(--tui-color-bg));
2221
+ --_bg: var(--tui-multiselect-trigger-bg, var(--tui-color-bg-surface));
2167
2222
  --_fg: var(--tui-multiselect-trigger-fg, var(--tui-color-fg));
2168
2223
  --_border: var(--tui-multiselect-trigger-border, var(--tui-color-border));
2169
2224
  --_border-focus: var(--tui-multiselect-trigger-border-focus, var(--tui-theme-primary-base));
@@ -2172,7 +2227,7 @@
2172
2227
  border: none;
2173
2228
  font: inherit;
2174
2229
  margin: 0;
2175
- --_fs: var(--tui-typography-size-md);
2230
+ --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
2176
2231
  --_py: var(--tui-spacing-xxs);
2177
2232
  --_height: calc(2em + 2 * var(--_py));
2178
2233
  font-size: var(--_fs);
@@ -2180,11 +2235,11 @@
2180
2235
  min-height: var(--tui-control-height-md, var(--_height));
2181
2236
  }
2182
2237
  .tui-interface .tui-multiselect__trigger.is-size-sm {
2183
- --_fs: var(--tui-typography-size-sm);
2238
+ --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
2184
2239
  min-height: var(--tui-control-height-sm, var(--_height));
2185
2240
  }
2186
2241
  .tui-interface .tui-multiselect__trigger.is-size-lg {
2187
- --_fs: var(--tui-typography-size-lg);
2242
+ --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
2188
2243
  min-height: var(--tui-control-height-lg, var(--_height));
2189
2244
  }
2190
2245
  .tui-interface .tui-multiselect__trigger {
@@ -2331,13 +2386,14 @@
2331
2386
  animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
2332
2387
  }
2333
2388
  :where(.tui-interface) .tui-multiselect__option {
2389
+ --_option-radius: var(--tui-multiselect-option-radius, var(--tui-radius-sm));
2334
2390
  --_bg-hover: var(--tui-multiselect-option-bg-hover, var(--tui-theme-secondary-subtlest));
2335
2391
  --_bg-selected: var(--tui-multiselect-option-bg-selected, var(--tui-theme-primary-subtlest));
2336
2392
  display: flex;
2337
2393
  align-items: center;
2338
2394
  gap: var(--tui-spacing-xs);
2339
2395
  padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
2340
- border-radius: var(--tui-radius-sm);
2396
+ border-radius: var(--_option-radius);
2341
2397
  cursor: pointer;
2342
2398
  font-size: var(--tui-typography-size-sm);
2343
2399
  line-height: 1.4;
@@ -2431,7 +2487,7 @@
2431
2487
  }
2432
2488
  }
2433
2489
  .tui-interface .tui-select__trigger {
2434
- --_bg: var(--tui-select-trigger-bg, var(--tui-color-bg));
2490
+ --_bg: var(--tui-select-trigger-bg, var(--tui-color-bg-surface));
2435
2491
  --_fg: var(--tui-select-trigger-fg, var(--tui-color-fg));
2436
2492
  --_border: var(--tui-select-trigger-border, var(--tui-color-border));
2437
2493
  --_border-focus: var(--tui-select-trigger-border-focus, var(--tui-theme-primary-base));
@@ -2440,7 +2496,7 @@
2440
2496
  border: none;
2441
2497
  font: inherit;
2442
2498
  margin: 0;
2443
- --_fs: var(--tui-typography-size-md);
2499
+ --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
2444
2500
  --_py: var(--tui-spacing-xxs);
2445
2501
  --_height: calc(2em + 2 * var(--_py));
2446
2502
  font-size: var(--_fs);
@@ -2448,11 +2504,11 @@
2448
2504
  min-height: var(--tui-control-height-md, var(--_height));
2449
2505
  }
2450
2506
  .tui-interface .tui-select__trigger.is-size-sm {
2451
- --_fs: var(--tui-typography-size-sm);
2507
+ --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
2452
2508
  min-height: var(--tui-control-height-sm, var(--_height));
2453
2509
  }
2454
2510
  .tui-interface .tui-select__trigger.is-size-lg {
2455
- --_fs: var(--tui-typography-size-lg);
2511
+ --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
2456
2512
  min-height: var(--tui-control-height-lg, var(--_height));
2457
2513
  }
2458
2514
  .tui-interface .tui-select__trigger {
@@ -2564,13 +2620,14 @@
2564
2620
  animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing);
2565
2621
  }
2566
2622
  :where(.tui-interface) .tui-select__option {
2623
+ --_option-radius: var(--tui-select-option-radius, var(--tui-radius-sm));
2567
2624
  --_bg-hover: var(--tui-select-option-bg-hover, var(--tui-theme-secondary-subtlest));
2568
2625
  --_bg-selected: var(--tui-select-option-bg-selected, var(--tui-theme-primary-subtlest));
2569
2626
  display: flex;
2570
2627
  align-items: center;
2571
2628
  gap: var(--tui-spacing-xs);
2572
2629
  padding: var(--tui-spacing-xs) var(--tui-spacing-sm);
2573
- border-radius: var(--tui-radius-sm);
2630
+ border-radius: var(--_option-radius);
2574
2631
  cursor: pointer;
2575
2632
  font-size: var(--tui-typography-size-sm);
2576
2633
  line-height: 1.4;
@@ -2657,13 +2714,13 @@
2657
2714
  input[type=color],
2658
2715
  textarea,
2659
2716
  select) {
2660
- --_bg: var(--tui-input-bg, var(--tui-color-bg));
2717
+ --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
2661
2718
  --_fg: var(--tui-input-fg, var(--tui-color-fg-muted));
2662
2719
  --_border: var(--tui-input-border, var(--tui-color-border));
2663
2720
  --_border-focus: var(--tui-input-border-focus, var(--tui-theme-primary-base));
2664
2721
  --_border-invalid: var(--tui-input-border-invalid, var(--tui-theme-danger-base));
2665
2722
  --_radius: var(--tui-input-radius, var(--tui-radius-md));
2666
- --_fs: var(--tui-typography-size-md);
2723
+ --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
2667
2724
  --_py: var(--tui-spacing-xxs);
2668
2725
  --_height: calc(2em + 2 * var(--_py));
2669
2726
  font-size: var(--_fs);
@@ -2688,7 +2745,7 @@
2688
2745
  input[type=color],
2689
2746
  textarea,
2690
2747
  select).is-size-sm {
2691
- --_fs: var(--tui-typography-size-sm);
2748
+ --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
2692
2749
  min-height: var(--tui-control-height-sm, var(--_height));
2693
2750
  }
2694
2751
  :where(.tui-interface) :is(.tui-input,
@@ -2709,7 +2766,7 @@
2709
2766
  input[type=color],
2710
2767
  textarea,
2711
2768
  select).is-size-lg {
2712
- --_fs: var(--tui-typography-size-lg);
2769
+ --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
2713
2770
  min-height: var(--tui-control-height-lg, var(--_height));
2714
2771
  }
2715
2772
  :where(.tui-interface) :is(.tui-input,
@@ -2906,7 +2963,7 @@
2906
2963
  padding-inline-end: 0.25em;
2907
2964
  }
2908
2965
  :where(.tui-interface) input[type=file] {
2909
- --_bg: var(--tui-input-bg, var(--tui-color-bg));
2966
+ --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
2910
2967
  --_fg: var(--tui-input-fg, var(--tui-color-fg-muted));
2911
2968
  --_border: var(--tui-input-border, var(--tui-color-border));
2912
2969
  --_radius: var(--tui-input-radius, var(--tui-radius-md));
@@ -2980,7 +3037,7 @@
2980
3037
  transition-property: background-color, color, border-color;
2981
3038
  }
2982
3039
  .tui-interface .tui-icon-button .tui-icon {
2983
- font-size: calc(var(--_size) * 0.5);
3040
+ font-size: calc(var(--_size) * 0.75);
2984
3041
  }
2985
3042
  .tui-interface .tui-icon-button:hover {
2986
3043
  --_bg: var(--_bg-interact);
@@ -3122,6 +3179,11 @@
3122
3179
  .tui-modal {
3123
3180
  --_z: var(--tui-modal-z, var(--tui-layer-modal, 1000));
3124
3181
  --_backdrop: var(--tui-modal-backdrop, var(--tui-color-bg-overlay));
3182
+ --_spacing: var(--tui-modal-spacing, var(--tui-spacing-md));
3183
+ --_offset-top: var(--tui-modal-offset-top, env(safe-area-inset-top, 0px));
3184
+ --_offset-bottom: var(--tui-modal-offset-bottom, env(safe-area-inset-bottom, 0px));
3185
+ --_offset-start: var(--tui-modal-offset-start, env(safe-area-inset-left, 0px));
3186
+ --_offset-end: var(--tui-modal-offset-end, env(safe-area-inset-right, 0px));
3125
3187
  position: fixed;
3126
3188
  inset: 0;
3127
3189
  z-index: var(--_z);
@@ -3130,7 +3192,10 @@
3130
3192
  justify-content: center;
3131
3193
  align-items: flex-start;
3132
3194
  overflow: auto;
3133
- padding-block: 1rem;
3195
+ padding-block-start: calc(var(--_spacing) + var(--_offset-top));
3196
+ padding-block-end: calc(var(--_spacing) + var(--_offset-bottom));
3197
+ padding-inline-start: calc(var(--_spacing) + var(--_offset-start));
3198
+ padding-inline-end: calc(var(--_spacing) + var(--_offset-end));
3134
3199
  }
3135
3200
  .tui-modal__backdrop {
3136
3201
  position: fixed;
@@ -3157,8 +3222,8 @@
3157
3222
  --_shadow: var(--tui-modal-shadow, var(--tui-shadow-lg));
3158
3223
  position: relative;
3159
3224
  width: 100%;
3160
- max-inline-size: min(100vw - 2rem, var(--_max));
3161
- max-block-size: calc(100dvh - 2rem);
3225
+ max-inline-size: var(--_max);
3226
+ max-block-size: calc(100dvh - var(--_spacing) * 2 - var(--_offset-top) - var(--_offset-bottom));
3162
3227
  margin-block: auto;
3163
3228
  overflow: hidden;
3164
3229
  display: flex;
@@ -3227,6 +3292,9 @@
3227
3292
  align-items: flex-start;
3228
3293
  gap: var(--tui-spacing-sm);
3229
3294
  }
3295
+ .tui-modal__dialog .tui-modal__head :is(h1, h2, h3, h4, h5, h6) {
3296
+ margin-block: 0;
3297
+ }
3230
3298
  .tui-modal__dialog .tui-modal__head-icon {
3231
3299
  flex-shrink: 0;
3232
3300
  display: flex;
@@ -5011,7 +5079,7 @@
5011
5079
  }
5012
5080
  }
5013
5081
  :where(.tui-interface) .tui-textarea {
5014
- --_fs: var(--tui-typography-size-md);
5082
+ --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
5015
5083
  --_py: var(--tui-spacing-xxs);
5016
5084
  --_height: calc(2em + 2 * var(--_py));
5017
5085
  font-size: var(--_fs);
@@ -5019,11 +5087,11 @@
5019
5087
  min-height: var(--tui-control-height-md, var(--_height));
5020
5088
  }
5021
5089
  :where(.tui-interface) .tui-textarea.is-size-sm {
5022
- --_fs: var(--tui-typography-size-sm);
5090
+ --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
5023
5091
  min-height: var(--tui-control-height-sm, var(--_height));
5024
5092
  }
5025
5093
  :where(.tui-interface) .tui-textarea.is-size-lg {
5026
- --_fs: var(--tui-typography-size-lg);
5094
+ --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
5027
5095
  min-height: var(--tui-control-height-lg, var(--_height));
5028
5096
  }
5029
5097
  :where(.tui-interface) .tui-textarea {
@@ -5038,11 +5106,11 @@
5038
5106
  }
5039
5107
  :where(.tui-interface) .tui-input-group {
5040
5108
  --_gap: var(--tui-input-group-gap, var(--tui-spacing-xs));
5041
- --_bg: var(--tui-input-bg, var(--tui-color-bg));
5109
+ --_bg: var(--tui-input-bg, var(--tui-color-bg-surface));
5042
5110
  --_border: var(--tui-input-border, var(--tui-color-border));
5043
5111
  --_border-focus: var(--tui-input-border-focus, var(--tui-theme-primary-base));
5044
5112
  --_radius: var(--tui-input-radius, var(--tui-radius-md));
5045
- --_fs: var(--tui-typography-size-md);
5113
+ --_fs: var(--tui-control-font-size-md, var(--tui-typography-size-md));
5046
5114
  --_py: var(--tui-spacing-xxs);
5047
5115
  --_height: calc(2em + 2 * var(--_py));
5048
5116
  font-size: var(--_fs);
@@ -5050,11 +5118,11 @@
5050
5118
  min-height: var(--tui-control-height-md, var(--_height));
5051
5119
  }
5052
5120
  :where(.tui-interface) .tui-input-group.is-size-sm {
5053
- --_fs: var(--tui-typography-size-sm);
5121
+ --_fs: var(--tui-control-font-size-sm, var(--tui-typography-size-sm));
5054
5122
  min-height: var(--tui-control-height-sm, var(--_height));
5055
5123
  }
5056
5124
  :where(.tui-interface) .tui-input-group.is-size-lg {
5057
- --_fs: var(--tui-typography-size-lg);
5125
+ --_fs: var(--tui-control-font-size-lg, var(--tui-typography-size-lg));
5058
5126
  min-height: var(--tui-control-height-lg, var(--_height));
5059
5127
  }
5060
5128
  :where(.tui-interface) .tui-input-group {