@planningcenter/tapestry 3.4.1 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (99) hide show
  1. package/dist/components/button/Button.d.ts +1 -0
  2. package/dist/components/button/Button.d.ts.map +1 -1
  3. package/dist/components/button/Button.js +1 -0
  4. package/dist/components/button/Button.js.map +1 -1
  5. package/dist/components/button/DropdownButton.d.ts +1 -0
  6. package/dist/components/button/DropdownButton.d.ts.map +1 -1
  7. package/dist/components/button/DropdownButton.js +1 -0
  8. package/dist/components/button/DropdownButton.js.map +1 -1
  9. package/dist/components/button/DropdownIconButton.d.ts +1 -0
  10. package/dist/components/button/DropdownIconButton.d.ts.map +1 -1
  11. package/dist/components/button/DropdownIconButton.js +1 -0
  12. package/dist/components/button/DropdownIconButton.js.map +1 -1
  13. package/dist/components/button/IconButton.d.ts +1 -0
  14. package/dist/components/button/IconButton.d.ts.map +1 -1
  15. package/dist/components/button/IconButton.js +1 -0
  16. package/dist/components/button/IconButton.js.map +1 -1
  17. package/dist/components/checkbox/Checkbox.d.ts +1 -0
  18. package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
  19. package/dist/components/checkbox/Checkbox.js +1 -0
  20. package/dist/components/checkbox/Checkbox.js.map +1 -1
  21. package/dist/components/combo-box/ComboBox.d.ts +1 -1
  22. package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
  23. package/dist/components/combo-box/ComboBox.js.map +1 -1
  24. package/dist/components/date-picker/DatePicker.d.ts +2 -1
  25. package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
  26. package/dist/components/date-picker/DatePicker.js +1 -0
  27. package/dist/components/date-picker/DatePicker.js.map +1 -1
  28. package/dist/components/dropdown/Dropdown.d.ts +1 -0
  29. package/dist/components/dropdown/Dropdown.d.ts.map +1 -1
  30. package/dist/components/dropdown/Dropdown.js +1 -0
  31. package/dist/components/dropdown/Dropdown.js.map +1 -1
  32. package/dist/components/field/Field.d.ts +43 -0
  33. package/dist/components/field/Field.d.ts.map +1 -0
  34. package/dist/components/field/Field.js +38 -0
  35. package/dist/components/field/Field.js.map +1 -0
  36. package/dist/components/field/index.d.ts +4 -0
  37. package/dist/components/field/index.d.ts.map +1 -0
  38. package/dist/components/flex/Flex.d.ts +69 -0
  39. package/dist/components/flex/Flex.d.ts.map +1 -0
  40. package/dist/components/flex/Flex.js +18 -0
  41. package/dist/components/flex/Flex.js.map +1 -0
  42. package/dist/components/flex/index.d.ts +3 -0
  43. package/dist/components/flex/index.d.ts.map +1 -0
  44. package/dist/components/input/Input.d.ts +1 -0
  45. package/dist/components/input/Input.d.ts.map +1 -1
  46. package/dist/components/input/Input.js +1 -0
  47. package/dist/components/input/Input.js.map +1 -1
  48. package/dist/components/link/Link.d.ts +1 -0
  49. package/dist/components/link/Link.d.ts.map +1 -1
  50. package/dist/components/link/Link.js +1 -0
  51. package/dist/components/link/Link.js.map +1 -1
  52. package/dist/components/number-stepper/NumberStepper.d.ts +1 -1
  53. package/dist/components/number-stepper/NumberStepper.d.ts.map +1 -1
  54. package/dist/components/number-stepper/NumberStepper.js.map +1 -1
  55. package/dist/components/radio/Radio.d.ts +1 -0
  56. package/dist/components/radio/Radio.d.ts.map +1 -1
  57. package/dist/components/radio/Radio.js +1 -0
  58. package/dist/components/radio/Radio.js.map +1 -1
  59. package/dist/components/select/Select.d.ts +1 -0
  60. package/dist/components/select/Select.d.ts.map +1 -1
  61. package/dist/components/select/Select.js +1 -0
  62. package/dist/components/select/Select.js.map +1 -1
  63. package/dist/components/select/SelectNative.js +1 -1
  64. package/dist/components/select/SelectNative.js.map +1 -1
  65. package/dist/components/select/SelectPopover.js +1 -1
  66. package/dist/components/select/SelectPopover.js.map +1 -1
  67. package/dist/components/text-area/TextArea.d.ts +1 -0
  68. package/dist/components/text-area/TextArea.d.ts.map +1 -1
  69. package/dist/components/text-area/TextArea.js +1 -0
  70. package/dist/components/text-area/TextArea.js.map +1 -1
  71. package/dist/components/time-field/TimeField.d.ts +2 -1
  72. package/dist/components/time-field/TimeField.d.ts.map +1 -1
  73. package/dist/components/time-field/TimeField.js +1 -0
  74. package/dist/components/time-field/TimeField.js.map +1 -1
  75. package/dist/components/toggle-switch/ToggleSwitch.d.ts +1 -0
  76. package/dist/components/toggle-switch/ToggleSwitch.d.ts.map +1 -1
  77. package/dist/components/toggle-switch/ToggleSwitch.js +1 -0
  78. package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -1
  79. package/dist/index.css +351 -154
  80. package/dist/index.css.map +1 -1
  81. package/dist/index.d.ts +2 -0
  82. package/dist/index.d.ts.map +1 -1
  83. package/dist/index.js +2 -0
  84. package/dist/index.js.map +1 -1
  85. package/dist/reactRender.css +2266 -1426
  86. package/dist/reactRender.css.map +1 -1
  87. package/dist/reactRenderLegacy.css +2266 -1426
  88. package/dist/reactRenderLegacy.css.map +1 -1
  89. package/dist/unstable.css +1114 -274
  90. package/dist/unstable.css.map +1 -1
  91. package/dist/unstable.d.ts +1 -1
  92. package/dist/unstable.d.ts.map +1 -1
  93. package/dist/unstable.js +3 -1
  94. package/dist/unstable.js.map +1 -1
  95. package/dist/utilities/breakpoints.d.ts +9 -0
  96. package/dist/utilities/breakpoints.d.ts.map +1 -0
  97. package/dist/utilities/spacingTokens.d.ts +2 -0
  98. package/dist/utilities/spacingTokens.d.ts.map +1 -0
  99. package/package.json +8 -6
package/dist/index.css CHANGED
@@ -2551,143 +2551,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2551
2551
  color:var(--t-text-color-secondary);
2552
2552
  }
2553
2553
 
2554
- .tds-input{
2555
- --tds-input-border-color:var(--t-form-border-color);
2556
- --tds-input-border-color-hover:var(--t-form-border-color-hover);
2557
- --tds-input-background-color:var(--t-form-background-color);
2558
- --tds-input-color:var(--t-form-color);
2559
- --tds-input-font-size:var(--t-font-size-md);
2560
- --tds-input-description-color:var(--t-text-color-secondary);
2561
- --tds-input-description-invalid-icon-display:none;
2562
- --tds-input-min-height:var(--t-container-size-md);
2563
- --tds-input-padding-inline:var(--t-spacing-1);
2564
-
2565
- --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
2566
-
2567
- display:flex;
2568
- flex-direction:column;
2569
- gap:var(--t-spacing-half);
2570
- }
2571
-
2572
- .tds-input label{
2573
- font-size:var(--t-font-size-md);
2574
- font-weight:var(--t-font-weight-normal);
2575
- color:var(--t-text-color);
2576
- }
2577
-
2578
- .tds-input :is(input,textarea){
2579
- inline-size:100%;
2580
- block-size:auto;
2581
- min-block-size:var(--tds-input-min-height);
2582
- padding-block:var(--tds-input-padding-block);
2583
- padding-inline:var(--tds-input-padding-inline);
2584
- font-family:inherit;
2585
- font-size:var(--tds-input-font-size);
2586
- color:var(--tds-input-color);
2587
- -webkit-appearance:none;
2588
- -moz-appearance:none;
2589
- appearance:none;
2590
- outline:var(--t-focus-ring-width) solid transparent;
2591
- outline-offset:0;
2592
- background-color:var(--tds-input-background-color);
2593
- border:var(--t-form-border-width) solid var(--tds-input-border-color);
2594
- border-radius:var(--t-form-border-radius);
2595
- transition-timing-function:var(--t-ease-in-out);
2596
- transition-duration:var(--t-duration-200);
2597
- transition-property:var(--tds-input-transition-property);
2598
- }
2599
-
2600
- :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
2601
- border-color:var(--tds-input-border-color-hover);
2602
- }
2603
-
2604
- :is(.tds-input :is(input,textarea)):focus{
2605
- outline-color:transparent;
2606
- }
2607
-
2608
- :is(.tds-input :is(input,textarea)):focus-visible{
2609
- outline-color:var(--t-focus-ring-color);
2610
- outline-offset:var(--t-focus-ring-offset);
2611
- border-color:var(--t-form-border-color-focus);
2612
- }
2613
-
2614
- :is(.tds-input :is(input,textarea))::-moz-placeholder{
2615
- color:var(--t-form-placeholder-color);
2616
- -moz-user-select:none;
2617
- user-select:none;
2618
- }
2619
-
2620
- :is(.tds-input :is(input,textarea))::placeholder{
2621
- color:var(--t-form-placeholder-color);
2622
- -webkit-user-select:none;
2623
- -moz-user-select:none;
2624
- user-select:none;
2625
- }
2626
-
2627
- @media (prefers-reduced-motion: reduce){
2628
-
2629
- .tds-input :is(input,textarea){
2630
- --tds-input-transition-property:none;
2631
- }
2632
- }
2633
-
2634
- .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
2635
- --tds-input-background-color:var(--t-form-background-color-error);
2636
- --tds-input-border-color:var(--t-form-border-color-error);
2637
- --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
2638
- --tds-input-description-color:var(--t-text-color-status-error);
2639
- --tds-input-description-invalid-icon-display:inline-block;
2640
- }
2641
-
2642
- .tds-input:has(:is(input,textarea):required) label::after{
2643
- margin-left:.25ch;
2644
- color:var(--t-text-color-status-error);
2645
- content:"*";
2646
- }
2647
-
2648
- .tds-input:where(:has(:is(input,textarea):disabled)){
2649
- --tds-input-border-color:var(--t-form-border-color-disabled);
2650
- --tds-input-background-color:var(--t-form-background-color-disabled);
2651
- --tds-input-color:var(--t-form-color-disabled);
2652
- }
2653
-
2654
- .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
2655
- cursor:not-allowed;
2656
- }
2657
-
2658
- .tds-input:where(:has(:is(input,textarea)[readonly])){
2659
- --tds-input-border-color:var(--t-form-border-color-readonly);
2660
- --tds-input-background-color:var(--t-form-background-color-readonly);
2661
- }
2662
-
2663
- .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
2664
- border-color:var(--tds-input-border-color-hover);
2665
- }
2666
-
2667
- .tds-input.tds-input--lg{
2668
- --tds-input-min-height:var(--t-container-size-lg);
2669
- --tds-input-font-size:var(--t-font-size-lg);
2670
- }
2671
-
2672
- .tds-input-description{
2673
- display:flex;
2674
- gap:var(--t-spacing-half);
2675
- align-items:flex-start;
2676
- margin:0;
2677
- font-size:var(--t-font-size-sm);
2678
- line-height:1.35;
2679
- color:var(--tds-input-description-color, var(--t-text-color-secondary));
2680
- cursor:text;
2681
- }
2682
-
2683
- .tds-input-description .tds-input-description-invalid-icon{
2684
- display:var(--tds-input-description-invalid-icon-display, none);
2685
- flex-shrink:0;
2686
- margin-block-start:calc(.5lh - .5em);
2687
- line-height:1.35;
2688
- }
2689
-
2690
2554
  .tds-field{
2555
+ --tds-field-label-color:var(--t-text-color);
2556
+ --tds-field-label-cursor:default;
2557
+ --tds-field-label-font-size:var(--t-font-size-md);
2558
+ --tds-field-description-color:var(--t-text-color-secondary);
2559
+ --tds-field-description-cursor:text;
2560
+ --tds-field-description-font-size:var(--t-font-size-sm);
2561
+ --tds-field-description-line-height:1.35;
2562
+ --tds-field-description-invalid-icon-display:none;
2691
2563
  --tds-field-border-color:var(--t-form-border-color);
2692
2564
  --tds-field-border-color-hover:var(--t-form-border-color-hover);
2693
2565
  --tds-field-border-color-active:var(--t-form-border-color-focus);
@@ -2698,8 +2570,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2698
2570
  --tds-field-min-height:var(--t-container-size-md);
2699
2571
  --tds-field-padding-block:6px;
2700
2572
  --tds-field-padding-inline:var(--t-spacing-1);
2701
- --tds-field-description-color:var(--t-text-color-secondary);
2702
- --tds-field-description-invalid-icon-display:none;
2703
2573
 
2704
2574
  position:relative;
2705
2575
  display:flex;
@@ -2707,10 +2577,28 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2707
2577
  gap:var(--t-spacing-half);
2708
2578
  }
2709
2579
 
2580
+ .tds-field:has(input:disabled):not([data-disabled]),.tds-field:has(select:disabled):not([data-disabled]),.tds-field:has(textarea:disabled):not([data-disabled]){
2581
+ --tds-field-label-color:var(--t-form-color-disabled);
2582
+ --tds-field-label-cursor:not-allowed;
2583
+ --tds-field-description-color:var(--t-form-color-disabled);
2584
+ --tds-field-description-cursor:not-allowed;
2585
+ }
2586
+
2587
+ .tds-field:has([required],[aria-required="true"]) .tds-field-label::after{
2588
+ margin-left:.25ch;
2589
+ color:var(--t-text-color-status-error);
2590
+ content:"*" / "";
2591
+ }
2592
+
2593
+ .tds-field:has([aria-invalid="true"],:user-invalid){
2594
+ --tds-field-description-color:var(--t-text-color-status-error);
2595
+ --tds-field-description-invalid-icon-display:inline-block;
2596
+ }
2597
+
2710
2598
  .tds-field[data-required] .tds-field-label::after{
2711
2599
  margin-left:.25ch;
2712
2600
  color:var(--t-text-color-status-error);
2713
- content:"*";
2601
+ content:"*" / "";
2714
2602
  }
2715
2603
 
2716
2604
  .tds-field[data-invalid]{
@@ -2733,16 +2621,66 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2733
2621
  cursor:not-allowed;
2734
2622
  }
2735
2623
 
2624
+ .tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"]){
2625
+ --tds-field-label-cursor:pointer;
2626
+
2627
+ display:inline-grid;
2628
+ grid-template-columns:auto;
2629
+ grid-auto-columns:1fr;
2630
+ row-gap:var(--t-spacing-fourth);
2631
+ -moz-column-gap:var(--t-spacing-1);
2632
+ column-gap:var(--t-spacing-1);
2633
+ }
2634
+
2635
+ :is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])):has(:disabled){
2636
+ --tds-field-label-cursor:not-allowed;
2637
+ }
2638
+
2639
+ :is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) input[type="checkbox"],:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) input[type="radio"],:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) tds-indeterminate{
2640
+ grid-row:1;
2641
+ grid-column:1;
2642
+ align-self:center;
2643
+ }
2644
+
2645
+ :is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) tds-indeterminate{
2646
+ display:flex;
2647
+ }
2648
+
2649
+ :is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) .tds-field-label{
2650
+ grid-row:1;
2651
+ grid-column:2;
2652
+ }
2653
+
2654
+ :is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) .tds-field-description{
2655
+ grid-row:2;
2656
+ grid-column:2;
2657
+ }
2658
+
2659
+ .tds-field--sm{
2660
+ --tds-field-label-font-size:var(--t-font-size-sm);
2661
+ --tds-field-description-font-size:var(--t-font-size-xs);
2662
+ --tds-field-description-line-height:1.3;
2663
+ }
2664
+
2736
2665
  .tds-field--lg{
2737
2666
  --tds-field-min-height:var(--t-container-size-lg);
2738
2667
  --tds-field-font-size:var(--t-font-size-lg);
2739
2668
  }
2740
2669
 
2741
2670
  .tds-field-label{
2742
- font-size:var(--t-font-size-md);
2671
+ font-size:var(--tds-field-label-font-size);
2743
2672
  font-weight:var(--t-font-weight-normal);
2744
- color:var(--t-text-color);
2745
- cursor:default;
2673
+ color:var(--tds-field-label-color);
2674
+ cursor:var(--tds-field-label-cursor);
2675
+ }
2676
+
2677
+ .tds-field-label--hidden{
2678
+ position:absolute;
2679
+ width:1px;
2680
+ height:1px;
2681
+ overflow:hidden;
2682
+ white-space:nowrap;
2683
+ clip-path:inset(50%);
2746
2684
  }
2747
2685
 
2748
2686
  .tds-field-control{
@@ -2795,17 +2733,17 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2795
2733
  gap:var(--t-spacing-half);
2796
2734
  align-items:flex-start;
2797
2735
  margin:0;
2798
- font-size:var(--t-font-size-sm);
2799
- line-height:1.35;
2736
+ font-size:var(--tds-field-description-font-size);
2737
+ line-height:var(--tds-field-description-line-height);
2800
2738
  color:var(--tds-field-description-color, var(--t-text-color-secondary));
2801
- cursor:text;
2739
+ cursor:var(--tds-field-description-cursor);
2802
2740
  }
2803
2741
 
2804
2742
  .tds-field-description .tds-field-description-invalid-icon{
2805
2743
  display:var(--tds-field-description-invalid-icon-display, none);
2806
2744
  flex-shrink:0;
2807
2745
  margin-block-start:calc(.5lh - .5em);
2808
- line-height:1.35;
2746
+ line-height:var(--tds-field-description-line-height);
2809
2747
  }
2810
2748
 
2811
2749
  .tds-field-date-segment{
@@ -3191,6 +3129,131 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3191
3129
  --tds-date-picker-popover-font-size:var(--t-font-size-lg);
3192
3130
  }
3193
3131
 
3132
+ .tds-dropdown-popover{
3133
+ min-inline-size:10rem;
3134
+ max-inline-size:24rem;
3135
+ padding:var(--t-spacing-1);
3136
+ overflow:auto;
3137
+ overscroll-behavior:none;
3138
+ -webkit-user-select:none;
3139
+ -moz-user-select:none;
3140
+ user-select:none;
3141
+ outline:0;
3142
+ scrollbar-color:#0004 var(--t-surface-color-card);
3143
+ scrollbar-width:thin;
3144
+ background:var(--t-surface-color-card);
3145
+ background-clip:padding-box;
3146
+ border:1px solid var(--t-border-color);
3147
+ border-radius:var(--t-border-radius);
3148
+ box-shadow:0 10px 15px -3px hsl(0 0% 0% / .05), 0 4px 6px -4px hsl(0 0% 0% / .05);
3149
+ }
3150
+ .tds-dropdown-popover[data-entering]{
3151
+ animation:tds-dropdown-popover var(--t-duration-300) var(--t-ease-out);
3152
+ }
3153
+ .tds-dropdown-popover[data-exiting]{
3154
+ animation:tds-dropdown-popover var(--t-duration-200) var(--t-ease-in) reverse;
3155
+ }
3156
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
3157
+ will-change:opacity, transform;
3158
+ }
3159
+ @keyframes tds-dropdown-popover{
3160
+ from{
3161
+ opacity:0;
3162
+ transform:translateY(-8px);
3163
+ }
3164
+ }
3165
+ @media (prefers-reduced-motion: reduce){
3166
+ .tds-dropdown-popover[data-entering],.tds-dropdown-popover[data-exiting]{
3167
+ animation:none;
3168
+ }
3169
+ }
3170
+ .tds-dropdown-popover [role="menu"]{
3171
+ outline:0;
3172
+ }
3173
+ .tds-dropdown-item{
3174
+ --tds-dropdown-item-color:var(--t-text-color);
3175
+
3176
+ display:flex;
3177
+ gap:var(--t-spacing-1);
3178
+ align-items:center;
3179
+ padding-block:var(--t-spacing-1);
3180
+ padding-inline:var(--t-spacing-2);
3181
+ font-size:1rem;
3182
+ color:var(--tds-dropdown-item-color);
3183
+ text-decoration:none;
3184
+ cursor:default;
3185
+ outline:0;
3186
+ border-radius:var(--t-border-radius);
3187
+ }
3188
+ .tds-dropdown-item[data-hovered]:not([data-disabled]),.tds-dropdown-item[data-focus-visible]{
3189
+ background:var(--t-fill-color-neutral-070);
3190
+ }
3191
+ .tds-dropdown-item[data-pressed]:not([data-disabled]){
3192
+ background:var(--t-fill-color-neutral-060);
3193
+ }
3194
+ .tds-dropdown-item[data-disabled]{
3195
+ --tds-dropdown-item-color:var(--t-form-color-disabled);
3196
+
3197
+ cursor:not-allowed;
3198
+ }
3199
+ .tds-dropdown-item--destructive{
3200
+ --tds-dropdown-item-color:var(--t-text-color-status-error);
3201
+ }
3202
+ .tds-dropdown-item--staff-only{
3203
+ --tds-dropdown-item-color:var(--t-fill-color-product-staff);
3204
+ }
3205
+ a.tds-dropdown-item:is(:hover, :active){
3206
+ color:var(--tds-dropdown-item-color);
3207
+ }
3208
+ .tds-dropdown-item [slot="prefix"],
3209
+ .tds-dropdown-item [slot="suffix"]{
3210
+ flex-shrink:0;
3211
+ }
3212
+ .tds-dropdown-item [slot="label"]{
3213
+ flex:1;
3214
+ min-width:0;
3215
+ overflow:hidden;
3216
+ text-overflow:ellipsis;
3217
+ white-space:nowrap;
3218
+ }
3219
+ .tds-dropdown-item [slot="description"]{
3220
+ font-size:var(--t-font-size-sm);
3221
+ color:var(--t-text-color-secondary);
3222
+ }
3223
+ .tds-dropdown-item:has([slot="description"]){
3224
+ display:grid;
3225
+ grid-template-areas:"prefix label suffix" "prefix description suffix";
3226
+ grid-template-columns:auto 1fr auto;
3227
+ }
3228
+ .tds-dropdown-item:has([slot="description"]) [slot="prefix"]{
3229
+ grid-area:prefix;
3230
+ }
3231
+ .tds-dropdown-item:has([slot="description"]) [slot="label"]{
3232
+ grid-area:label;
3233
+ }
3234
+ .tds-dropdown-item:has([slot="description"]) [slot="description"]{
3235
+ grid-area:description;
3236
+ }
3237
+ .tds-dropdown-item:has([slot="description"]) [slot="suffix"]{
3238
+ grid-area:suffix;
3239
+ }
3240
+ .tds-dropdown-section:not(:first-child){
3241
+ margin-block-start:var(--t-spacing-half);
3242
+ }
3243
+ .tds-dropdown-section-label{
3244
+ padding-block:var(--t-spacing-1);
3245
+ padding-inline:var(--t-spacing-1);
3246
+ font-size:var(--t-font-size-sm);
3247
+ font-weight:var(--t-font-weight-semibold);
3248
+ color:var(--t-text-color-secondary);
3249
+ }
3250
+ .tds-dropdown-separator{
3251
+ margin-block:var(--t-spacing-half);
3252
+ margin-inline:0;
3253
+ border:0;
3254
+ border-top:1px solid var(--t-border-color);
3255
+ }
3256
+
3194
3257
 
3195
3258
  :is(.tds-input input)::-webkit-search-decoration,:is(.tds-input input)::-webkit-search-cancel-button,:is(.tds-input input)::-webkit-search-results-button,:is(.tds-input input)::-webkit-search-results-decoration{
3196
3259
  -webkit-appearance:none;
@@ -3215,6 +3278,143 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3215
3278
  }
3216
3279
  }
3217
3280
 
3281
+ .tds-input{
3282
+ --tds-input-border-color:var(--t-form-border-color);
3283
+ --tds-input-border-color-hover:var(--t-form-border-color-hover);
3284
+ --tds-input-background-color:var(--t-form-background-color);
3285
+ --tds-input-color:var(--t-form-color);
3286
+ --tds-input-font-size:var(--t-font-size-md);
3287
+ --tds-input-description-color:var(--t-text-color-secondary);
3288
+ --tds-input-description-invalid-icon-display:none;
3289
+ --tds-input-min-height:var(--t-container-size-md);
3290
+ --tds-input-padding-inline:var(--t-spacing-1);
3291
+
3292
+ --tds-input-transition-property:background-color, border-color, outline-color, outline-offset;
3293
+
3294
+ display:flex;
3295
+ flex-direction:column;
3296
+ gap:var(--t-spacing-half);
3297
+ }
3298
+
3299
+ .tds-input label{
3300
+ font-size:var(--t-font-size-md);
3301
+ font-weight:var(--t-font-weight-normal);
3302
+ color:var(--t-text-color);
3303
+ }
3304
+
3305
+ .tds-input :is(input,textarea){
3306
+ inline-size:100%;
3307
+ block-size:auto;
3308
+ min-block-size:var(--tds-input-min-height);
3309
+ padding-block:var(--tds-input-padding-block);
3310
+ padding-inline:var(--tds-input-padding-inline);
3311
+ font-family:inherit;
3312
+ font-size:var(--tds-input-font-size);
3313
+ color:var(--tds-input-color);
3314
+ -webkit-appearance:none;
3315
+ -moz-appearance:none;
3316
+ appearance:none;
3317
+ outline:var(--t-focus-ring-width) solid transparent;
3318
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
3319
+ outline-offset:0;
3320
+ background-color:var(--tds-input-background-color);
3321
+ border:var(--t-form-border-width) solid var(--tds-input-border-color);
3322
+ border-radius:var(--t-form-border-radius);
3323
+ transition-timing-function:var(--t-ease-in-out);
3324
+ transition-duration:var(--t-duration-200);
3325
+ transition-property:var(--tds-input-transition-property);
3326
+ }
3327
+
3328
+ :is(.tds-input :is(input,textarea)):hover:not(:disabled,:focus-visible,[readonly]){
3329
+ border-color:var(--tds-input-border-color-hover);
3330
+ }
3331
+
3332
+ :is(.tds-input :is(input,textarea)):focus{
3333
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
3334
+ }
3335
+
3336
+ :is(.tds-input :is(input,textarea)):focus-visible{
3337
+ outline-color:var(--t-focus-ring-color);
3338
+ outline-offset:var(--t-focus-ring-offset);
3339
+ border-color:var(--t-form-border-color-focus);
3340
+ }
3341
+
3342
+ :is(.tds-input :is(input,textarea))::-moz-placeholder{
3343
+ color:var(--t-form-placeholder-color);
3344
+ -moz-user-select:none;
3345
+ user-select:none;
3346
+ }
3347
+
3348
+ :is(.tds-input :is(input,textarea))::placeholder{
3349
+ color:var(--t-form-placeholder-color);
3350
+ -webkit-user-select:none;
3351
+ -moz-user-select:none;
3352
+ user-select:none;
3353
+ }
3354
+
3355
+ @media (prefers-reduced-motion: reduce){
3356
+
3357
+ .tds-input :is(input,textarea){
3358
+ --tds-input-transition-property:none;
3359
+ }
3360
+ }
3361
+
3362
+ .tds-input.tds-input--invalid,.tds-input:has(:is(input,textarea):is(:user-invalid,[aria-invalid="true"])){
3363
+ --tds-input-background-color:var(--t-form-background-color-error);
3364
+ --tds-input-border-color:var(--t-form-border-color-error);
3365
+ --tds-input-border-color-hover:var(--t-form-border-color-error-hover);
3366
+ --tds-input-description-color:var(--t-text-color-status-error);
3367
+ --tds-input-description-invalid-icon-display:inline-block;
3368
+ }
3369
+
3370
+ .tds-input:has(:is(input,textarea):required) label::after{
3371
+ margin-left:.25ch;
3372
+ color:var(--t-text-color-status-error);
3373
+ content:"*";
3374
+ }
3375
+
3376
+ .tds-input:where(:has(:is(input,textarea):disabled)){
3377
+ --tds-input-border-color:var(--t-form-border-color-disabled);
3378
+ --tds-input-background-color:var(--t-form-background-color-disabled);
3379
+ --tds-input-color:var(--t-form-color-disabled);
3380
+ }
3381
+
3382
+ .tds-input:where(:has(:is(input,textarea):disabled)) :is(input,textarea){
3383
+ cursor:not-allowed;
3384
+ }
3385
+
3386
+ .tds-input:where(:has(:is(input,textarea)[readonly])){
3387
+ --tds-input-border-color:var(--t-form-border-color-readonly);
3388
+ --tds-input-background-color:var(--t-form-background-color-readonly);
3389
+ }
3390
+
3391
+ .tds-input:where(:has(:is(input,textarea)[readonly])) :is(input,textarea):focus{
3392
+ border-color:var(--tds-input-border-color-hover);
3393
+ }
3394
+
3395
+ .tds-input.tds-input--lg{
3396
+ --tds-input-min-height:var(--t-container-size-lg);
3397
+ --tds-input-font-size:var(--t-font-size-lg);
3398
+ }
3399
+
3400
+ .tds-input-description{
3401
+ display:flex;
3402
+ gap:var(--t-spacing-half);
3403
+ align-items:flex-start;
3404
+ margin:0;
3405
+ font-size:var(--t-font-size-sm);
3406
+ line-height:1.35;
3407
+ color:var(--tds-input-description-color, var(--t-text-color-secondary));
3408
+ cursor:text;
3409
+ }
3410
+
3411
+ .tds-input-description .tds-input-description-invalid-icon{
3412
+ display:var(--tds-input-description-invalid-icon-display, none);
3413
+ flex-shrink:0;
3414
+ margin-block-start:calc(.5lh - .5em);
3415
+ line-height:1.35;
3416
+ }
3417
+
3218
3418
  .tds-number-stepper{
3219
3419
  --tds-number-stepper-button-offset:4px;
3220
3420
  --tds-number-stepper-button-gap:2px;
@@ -3345,13 +3545,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3345
3545
  }
3346
3546
 
3347
3547
  .tds-radio:has(input:checked){
3348
- --tds-radio-input-background-color:var(--t-form-background-color);
3548
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
3349
3549
  --tds-radio-input-border-color:var(--t-border-color-control-info);
3350
3550
  --tds-radio-input-border-width:4px;
3351
3551
  }
3352
3552
 
3353
3553
  .tds-radio:has(input:checked) input:hover:not(:disabled){
3354
- --tds-radio-input-background-color:var(--t-form-background-color);
3554
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
3355
3555
  --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
3356
3556
  }
3357
3557
 
@@ -3440,7 +3640,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3440
3640
  }
3441
3641
 
3442
3642
  :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
3443
- --tds-radio-input-background-color:var(--t-form-background-color);
3643
+ --tds-radio-input-background-color:var(--t-icon-color-inverted);
3444
3644
  }
3445
3645
 
3446
3646
  .tds-radio-group:has(input:required) legend::after{
@@ -3508,7 +3708,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3508
3708
  --tds-select-dropdown-scrollbar-width:thin;
3509
3709
  --tds-select-dropdown-border-radius:var(--t-border-radius);
3510
3710
  --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
3511
- --tds-select-dropdown-scroll-behavior:smooth;
3512
3711
  --tds-select-dropdown-transition:opacity var(--t-duration-300) var(--t-ease-out), translate var(--t-duration-300) var(--t-ease-out), display var(--t-duration-300) allow-discrete, overlay var(--t-duration-300) allow-discrete;
3513
3712
  --tds-select-dropdown-closed-opacity:0;
3514
3713
  --tds-select-dropdown-open-opacity:1;
@@ -3566,6 +3765,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3566
3765
  appearance:none;
3567
3766
  cursor:var(--tds-select-cursor, default);
3568
3767
  outline:var(--t-focus-ring-width) solid transparent;
3768
+ outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
3569
3769
  outline-offset:0;
3570
3770
  background-color:var(--tds-select-background-color);
3571
3771
  background-image:var(--tds-select-background-image);
@@ -3715,7 +3915,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3715
3915
  .tds-select{
3716
3916
  --tds-select-transition-property:none;
3717
3917
  --tds-select-dropdown-transition:none;
3718
- --tds-select-dropdown-scroll-behavior:auto;
3719
3918
  --tds-select-dropdown-closed-translate:none;
3720
3919
  --tds-select-dropdown-open-translate:none;
3721
3920
  --tds-select-caret-transition:none;
@@ -3799,12 +3998,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3799
3998
  position-try-fallbacks:flip-block, flip-inline;
3800
3999
  overflow:auto;
3801
4000
  overflow-x:hidden;
3802
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
3803
4001
  overscroll-behavior:none;
3804
4002
  -webkit-user-select:none;
3805
4003
  -moz-user-select:none;
3806
4004
  user-select:none;
3807
- scroll-padding-top:calc(var(--tds-select-group-label-padding-block-start) + var(--tds-select-group-label-font-size) + var(--t-spacing-2));
3808
4005
  scrollbar-color:var(--tds-select-dropdown-scrollbar-color);
3809
4006
  scrollbar-width:var(--tds-select-dropdown-scrollbar-width);
3810
4007
  background:var(--tds-select-dropdown-background-color);
@@ -3896,7 +4093,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
3896
4093
  position-try-fallbacks:flip-block, flip-inline;
3897
4094
  overflow:auto;
3898
4095
  overflow-x:hidden;
3899
- scroll-behavior:var(--tds-select-dropdown-scroll-behavior);
4096
+ scroll-behavior:auto;
3900
4097
  overscroll-behavior:none;
3901
4098
  -webkit-user-select:none;
3902
4099
  -moz-user-select:none;