@planningcenter/tapestry 3.1.0 → 3.1.1-rc.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 (9) hide show
  1. package/dist/index.css +113 -137
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +653 -677
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +653 -677
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/unstable.css +113 -137
  8. package/dist/unstable.css.map +1 -1
  9. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -979,154 +979,133 @@
979
979
  }
980
980
 
981
981
  .tds-page-header:not(.has-nav){
982
- padding-bottom:var(--tds-page-header-padding-y);
983
- }
982
+ padding-bottom:var(--tds-page-header-padding-y);
983
+ }
984
984
 
985
985
  .tds-page-header.inactive{
986
- background:var(--tds-page-header-background-color-inactive);
987
- }
988
-
989
- .tds-page-header__title-bar{
990
- display:flex;
991
- flex-direction:column;
992
- gap:var(--t-spacing-2) var(--t-spacing-1);
993
- align-items:flex-start;
994
- justify-content:space-between;
995
- padding:0 var(--tds-page-header-padding-x);
996
- }
986
+ background:var(--tds-page-header-background-color-inactive);
987
+ }
997
988
 
998
- .tds-page-header--profile > .tds-page-header__title-bar{
999
- align-items:center;
1000
- }
989
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
990
+ width:100%;
991
+ }
1001
992
 
1002
- .tds-page-header__primary{
1003
- width:100%;
1004
- }
993
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
994
+ display:flex;
995
+ flex-flow:row wrap;
996
+ gap:var(--t-spacing-half) var(--t-spacing-1);
997
+ align-items:flex-start;
998
+ justify-content:flex-start;
999
+ min-width:0;
1000
+ }
1005
1001
 
1006
- .tds-page-header__primary h1{
1007
- margin:0;
1008
- font-size:var(--tds-page-header-headline-font-size);
1009
- font-weight:var(--t-font-weight-normal);
1010
- line-height:32px;
1011
- color:var(--tds-page-header-headline-color);
1012
- overflow-wrap:break-word;
1013
- }
1002
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)):not(:has(ul)),:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) ul{
1003
+ display:flex;
1004
+ gap:var(--tds-page-header-nav-gap);
1005
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1006
+ margin:0 0 -1px;
1007
+ overflow:auto;
1008
+ list-style:none;
1009
+ background:var(--tds-page-header-nav-background);
1010
+ }
1014
1011
 
1015
- .tds-page-header [slot="actions"],
1016
- .tds-page-header .tds-page-header__actions{
1017
- width:100%;
1018
- }
1012
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button){
1013
+ position:relative;
1014
+ display:inline-flex;
1015
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1016
+ font-size:var(--t-font-size-sm);
1017
+ line-height:22px;
1018
+ color:var(--tds-page-header-nav-item-color);
1019
+ white-space:nowrap;
1020
+ text-decoration:none;
1021
+ -webkit-appearance:none;
1022
+ -moz-appearance:none;
1023
+ appearance:none;
1024
+ cursor:pointer;
1025
+ outline-offset:-2px;
1026
+ background-color:var(--tds-page-header-nav-item-background-color);
1027
+ background-clip:padding-box;
1028
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1029
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1030
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1031
+ }
1032
+
1033
+ .selected:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)){
1034
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1035
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1036
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1037
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1038
+ }
1019
1039
 
1020
- .has-multi-actions.tds-page-header [slot="actions"],
1021
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1022
- display:flex;
1023
- flex-flow:row wrap;
1024
- gap:var(--t-spacing-half) var(--t-spacing-1);
1025
- align-items:flex-start;
1026
- justify-content:flex-start;
1027
- min-width:0;
1028
- }
1040
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):hover{
1041
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1042
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1043
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1044
+ }
1029
1045
 
1030
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1031
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1032
- .tds-page-header nav[slot="navigation"] ul,
1033
- .tds-page-header nav.tds-page-header__nav ul{
1034
- display:flex;
1035
- gap:var(--tds-page-header-nav-gap);
1036
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1037
- margin:0 0 -1px;
1038
- overflow:auto;
1039
- list-style:none;
1040
- background:var(--tds-page-header-nav-background);
1041
- }
1046
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):active{
1047
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1048
+ border-color:var(--tds-page-header-nav-item-border-color-active);
1049
+ }
1042
1050
 
1043
- .tds-page-header nav[slot="navigation"] a,
1044
- .tds-page-header nav[slot="navigation"] button,
1045
- .tds-page-header nav.tds-page-header__nav a,
1046
- .tds-page-header nav.tds-page-header__nav button{
1047
- position:relative;
1048
- display:inline-flex;
1049
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1050
- font-size:var(--t-font-size-sm);
1051
- line-height:22px;
1052
- color:var(--tds-page-header-nav-item-color);
1053
- white-space:nowrap;
1054
- text-decoration:none;
1055
- -webkit-appearance:none;
1056
- -moz-appearance:none;
1057
- appearance:none;
1058
- cursor:pointer;
1059
- outline-offset:-2px;
1060
- background-color:var(--tds-page-header-nav-item-background-color);
1061
- background-clip:padding-box;
1062
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1063
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1064
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1065
- }
1051
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) :is(a,button)):not(.selected):disabled{
1052
+ color:var(--tds-page-header-nav-item-color-disabled);
1053
+ cursor:not-allowed;
1054
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1055
+ opacity:1;
1056
+ }
1066
1057
 
1067
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1068
- position:relative;
1069
- }
1058
+ :is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator){
1059
+ position:relative;
1060
+ }
1070
1061
 
1071
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1072
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1073
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1074
- }
1062
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator)) :is(a,button){
1063
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1064
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1065
+ }
1075
1066
 
1076
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1077
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1078
- position:absolute;
1079
- top:-5px;
1080
- right:-2px;
1081
- width:10px;
1082
- height:10px;
1083
- content:"";
1084
- background:var(--tds-page-header-nav-item-indicator-color);
1085
- border-radius:50%;
1086
- }
1067
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::before,:is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1068
+ position:absolute;
1069
+ top:-5px;
1070
+ right:-2px;
1071
+ width:10px;
1072
+ height:10px;
1073
+ content:"";
1074
+ background:var(--tds-page-header-nav-item-indicator-color);
1075
+ border-radius:50%;
1076
+ }
1087
1077
 
1088
1078
  @media (prefers-reduced-motion: no-preference){
1089
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1090
- animation:indicator-pulse 1.25s ease infinite;
1091
- }
1092
- }
1079
+ :is(:is(.tds-page-header nav:is([slot="navigation"],.tds-page-header__nav)) li:has(.indicator))::after{
1080
+ animation:indicator-pulse 1.25s ease infinite;
1081
+ }
1082
+ }
1093
1083
 
1094
- .tds-page-header nav[slot="navigation"] a.selected,
1095
- .tds-page-header nav[slot="navigation"] button.selected,
1096
- .tds-page-header nav.tds-page-header__nav a.selected,
1097
- .tds-page-header nav.tds-page-header__nav button.selected{
1098
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1099
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1100
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1101
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1084
+ .tds-page-header__title-bar{
1085
+ display:flex;
1086
+ flex-direction:column;
1087
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1088
+ align-items:flex-start;
1089
+ justify-content:space-between;
1090
+ padding:0 var(--tds-page-header-padding-x);
1102
1091
  }
1103
1092
 
1104
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1105
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1106
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1107
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1108
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1109
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1110
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1111
- }
1093
+ .tds-page-header--profile > .tds-page-header__title-bar{
1094
+ align-items:center;
1095
+ }
1112
1096
 
1113
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1114
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1115
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1116
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1117
- background-color:var(--tds-page-header-nav-item-background-color-active);
1118
- border-color:var(--tds-page-header-nav-item-border-color-active);
1097
+ .tds-page-header__primary{
1098
+ width:100%;
1119
1099
  }
1120
1100
 
1121
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1122
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1123
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1124
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1125
- color:var(--tds-page-header-nav-item-color-disabled);
1126
- cursor:not-allowed;
1127
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1128
- opacity:1;
1129
- }
1101
+ .tds-page-header__primary h1{
1102
+ margin:0;
1103
+ font-size:var(--tds-page-header-headline-font-size);
1104
+ font-weight:var(--t-font-weight-normal);
1105
+ line-height:32px;
1106
+ color:var(--tds-page-header-headline-color);
1107
+ overflow-wrap:break-word;
1108
+ }
1130
1109
 
1131
1110
  @media (min-width: 960px){
1132
1111
  .tds-page-header__primary{
@@ -1142,16 +1121,13 @@
1142
1121
  row-gap:12px;
1143
1122
  align-items:flex-start;
1144
1123
  }
1124
+ .tds-page-header :is([slot="actions"],.tds-page-header__actions){
1125
+ width:auto;
1126
+ }
1145
1127
 
1146
- .tds-page-header [slot="actions"],
1147
- .tds-page-header .tds-page-header__actions{
1148
- width:auto;
1149
- }
1150
-
1151
- .has-multi-actions.tds-page-header [slot="actions"],
1152
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1153
- justify-content:flex-end;
1154
- }
1128
+ .tds-page-header.has-multi-actions :is([slot="actions"],.tds-page-header__actions){
1129
+ justify-content:flex-end;
1130
+ }
1155
1131
  }
1156
1132
 
1157
1133
  .tds-page-header-phone,