@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.
- package/dist/components/button/Button.d.ts +1 -0
- package/dist/components/button/Button.d.ts.map +1 -1
- package/dist/components/button/Button.js +1 -0
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/button/DropdownButton.d.ts +1 -0
- package/dist/components/button/DropdownButton.d.ts.map +1 -1
- package/dist/components/button/DropdownButton.js +1 -0
- package/dist/components/button/DropdownButton.js.map +1 -1
- package/dist/components/button/DropdownIconButton.d.ts +1 -0
- package/dist/components/button/DropdownIconButton.d.ts.map +1 -1
- package/dist/components/button/DropdownIconButton.js +1 -0
- package/dist/components/button/DropdownIconButton.js.map +1 -1
- package/dist/components/button/IconButton.d.ts +1 -0
- package/dist/components/button/IconButton.d.ts.map +1 -1
- package/dist/components/button/IconButton.js +1 -0
- package/dist/components/button/IconButton.js.map +1 -1
- package/dist/components/checkbox/Checkbox.d.ts +1 -0
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.js +1 -0
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/combo-box/ComboBox.d.ts +1 -1
- package/dist/components/combo-box/ComboBox.d.ts.map +1 -1
- package/dist/components/combo-box/ComboBox.js.map +1 -1
- package/dist/components/date-picker/DatePicker.d.ts +2 -1
- package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DatePicker.js +1 -0
- package/dist/components/date-picker/DatePicker.js.map +1 -1
- package/dist/components/dropdown/Dropdown.d.ts +1 -0
- package/dist/components/dropdown/Dropdown.d.ts.map +1 -1
- package/dist/components/dropdown/Dropdown.js +1 -0
- package/dist/components/dropdown/Dropdown.js.map +1 -1
- package/dist/components/field/Field.d.ts +43 -0
- package/dist/components/field/Field.d.ts.map +1 -0
- package/dist/components/field/Field.js +38 -0
- package/dist/components/field/Field.js.map +1 -0
- package/dist/components/field/index.d.ts +4 -0
- package/dist/components/field/index.d.ts.map +1 -0
- package/dist/components/flex/Flex.d.ts +69 -0
- package/dist/components/flex/Flex.d.ts.map +1 -0
- package/dist/components/flex/Flex.js +18 -0
- package/dist/components/flex/Flex.js.map +1 -0
- package/dist/components/flex/index.d.ts +3 -0
- package/dist/components/flex/index.d.ts.map +1 -0
- package/dist/components/input/Input.d.ts +1 -0
- package/dist/components/input/Input.d.ts.map +1 -1
- package/dist/components/input/Input.js +1 -0
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/link/Link.d.ts +1 -0
- package/dist/components/link/Link.d.ts.map +1 -1
- package/dist/components/link/Link.js +1 -0
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/number-stepper/NumberStepper.d.ts +1 -1
- package/dist/components/number-stepper/NumberStepper.d.ts.map +1 -1
- package/dist/components/number-stepper/NumberStepper.js.map +1 -1
- package/dist/components/radio/Radio.d.ts +1 -0
- package/dist/components/radio/Radio.d.ts.map +1 -1
- package/dist/components/radio/Radio.js +1 -0
- package/dist/components/radio/Radio.js.map +1 -1
- package/dist/components/select/Select.d.ts +1 -0
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/select/Select.js +1 -0
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select/SelectNative.js +1 -1
- package/dist/components/select/SelectNative.js.map +1 -1
- package/dist/components/select/SelectPopover.js +1 -1
- package/dist/components/select/SelectPopover.js.map +1 -1
- package/dist/components/text-area/TextArea.d.ts +1 -0
- package/dist/components/text-area/TextArea.d.ts.map +1 -1
- package/dist/components/text-area/TextArea.js +1 -0
- package/dist/components/text-area/TextArea.js.map +1 -1
- package/dist/components/time-field/TimeField.d.ts +2 -1
- package/dist/components/time-field/TimeField.d.ts.map +1 -1
- package/dist/components/time-field/TimeField.js +1 -0
- package/dist/components/time-field/TimeField.js.map +1 -1
- package/dist/components/toggle-switch/ToggleSwitch.d.ts +1 -0
- package/dist/components/toggle-switch/ToggleSwitch.d.ts.map +1 -1
- package/dist/components/toggle-switch/ToggleSwitch.js +1 -0
- package/dist/components/toggle-switch/ToggleSwitch.js.map +1 -1
- package/dist/index.css +351 -154
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/reactRender.css +2266 -1426
- package/dist/reactRender.css.map +1 -1
- package/dist/reactRenderLegacy.css +2266 -1426
- package/dist/reactRenderLegacy.css.map +1 -1
- package/dist/unstable.css +1114 -274
- package/dist/unstable.css.map +1 -1
- package/dist/unstable.d.ts +1 -1
- package/dist/unstable.d.ts.map +1 -1
- package/dist/unstable.js +3 -1
- package/dist/unstable.js.map +1 -1
- package/dist/utilities/breakpoints.d.ts +9 -0
- package/dist/utilities/breakpoints.d.ts.map +1 -0
- package/dist/utilities/spacingTokens.d.ts +2 -0
- package/dist/utilities/spacingTokens.d.ts.map +1 -0
- 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(--
|
|
2671
|
+
font-size:var(--tds-field-label-font-size);
|
|
2743
2672
|
font-weight:var(--t-font-weight-normal);
|
|
2744
|
-
color:var(--
|
|
2745
|
-
cursor:
|
|
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(--
|
|
2799
|
-
line-height:
|
|
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:
|
|
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:
|
|
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-
|
|
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-
|
|
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-
|
|
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:
|
|
4096
|
+
scroll-behavior:auto;
|
|
3900
4097
|
overscroll-behavior:none;
|
|
3901
4098
|
-webkit-user-select:none;
|
|
3902
4099
|
-moz-user-select:none;
|